Vendor : Fullcalendar
Full-sized, drag & drop event calendar.
- License: MIT
- https://fullcalendar.io
src/js/vendors/vendor.fullcalendar.js
Fullcalendar Example
<!--
FULLCALENDAR
See below more info about attributes
NOTE:
data-fullcalendar-modal-event-edit
also used on event resize & drag (GET method only)
Open your console to see the request for event drag/resize (debug is enabled in demo)
-->
<div class="fullcalendar rounded"
data-fullcalendar-default-view="dayGridMonth"
data-fullcalendar-editable="true"
data-fullcalendar-timezone="local"
data-fullcalendar-default-date="now"
data-fullcalendar-modal-size="modal-lg"
data-fullcalendar-event-create-modal="true"
data-fullcalendar-modal-event-create="_ajax/fullcalendar_event_create.html"
data-fullcalendar-event-edit-modal="true"
data-fullcalendar-modal-event-edit="_ajax/fullcalendar_event_edit.html?id="
data-fullcalendar-date-click="modal"
data-fullcalendar-modal-date-click-modal="_ajax/fullcalendar_event_create.html?date="
data-toast-success="Successfully Updated!"
data-toast-position="top-center"
data-fullcalendar-plugins='[ "interaction", "dayGrid", "timeGrid", "list", "bootstrap", "googleCalendar" ]'
data-fullcalendar-google-apikey="AIzaSyCBpT7NTo9rwR-gS5iq7ayV-dGlE_Ebr0s"
data-fullcalendar-source-json-url='[
{
"url": "_ajax/fullcalendar_events.json",
"method": "GET",
"extraParams": {
"param1": "val1",
"param2": "val2"
}
},
{
"googleCalendarId": "6dhq1i511vid645mmtn2pujfok@group.calendar.google.com",
"className": "fc-smarty-gcal bg-primary-soft border-primary"
}
]'
data-fullcalendar-lang-btn='{
"today" : "today",
"month" : "month",
"week" : "week",
"day" : "day",
"list" : "list"
}'
data-fullcalendar-header='{
"left" : "prev,next, today, customAddEventButton",
"center" : "title",
"right" : "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
}'
data-fullcalendar-time-format='{
"hour" : "numeric",
"minute" : "2-digit",
"meridiem" : "short"
}'></div>
<!--
FULLCALENDAR ATTRIBUTES
data-fullcalendar-default-date="now|2019-08-01" = calendar date view (now or date)
Event id is added at the end of edit URL!
You should get data from database and populate your form!
data-fullcalendar-modal-event-edit="_ajax/fullcalendar_event_create.html?id="
// On date click - open modal
data-fullcalendar-date-click="modal" open in modal
data-fullcalendar-date-click="redirect" redirect to url
data-fullcalendar-date-click="" do nothing
data-fullcalendar-source-json-url url of JSON data. Multiple sources supported.
data-fullcalendar-source-json-inline the format is json, the same as external json, but added here (inline)
data-fullcalendar-source-object="myObj" javascript object - example:
-->
<script>
var myObj = [
{
id: '1',
title: 'All Day Event',
start: '2019-08-01'
},
{
id: '2',
title: 'Long Event',
start: '2019-08-07',
end: '2019-08-10'
},
];
</script>
// Default view
data-fullcalendar-default-view="dayGridMonth|timeGridWeek|timeGridDay|listWeek"
<!--
GOOGLE CALENDAR & LOCAL
Right now, Smarty is usiong Google Galendar (using "googleCalendar" plugin) & Local Json data.
You can add multiple sources (multiple local sources, multiple google calendars)
Create your own Google Calendar API before using because this is
used by Smarty as a demo. If you need help to setup google API,
please read this: https://fullcalendar.io/docs/google-calendar
Note: the plugin is not returning the colors from Google Calendar,
so set any bg-* default to diferentiate Google events.
-->
data-fullcalendar-google-apikey="AIzaSyCBpT7NTo9rwR-gS5iq7ayV-dGlE_Ebr0s"
data-fullcalendar-source-json-url='[
{
"url": "_ajax/fullcalendar_events.json",
"method": "GET",
"extraParams": {
"param1": "val1",
"param2": "val2"
}
},
{
"googleCalendarId": "6dhq1i511vid645mmtn2pujfok@group.calendar.google.com",
"className": "fc-smarty-gcal bg-primary-soft border-primary"
}
]'
++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
// JAVASCRIPT : EXTEND CURRENT SETTINGS
data-fullcalendar-extend="extendCalendar"
<script>
var extendCalendar = {
// your custom fullcalendar
};
</script>
++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
// JAVASCRIPT : ENTIRELY CUSTOM FULLCALENDAR! ALL SMARTY FULLCALENDAR IS IGNORED
// EXCEPT THESE (which you can overwrite in your custom)
/*
var _defaults = {
themeSystem : 'bootstrap',
defaultView : defaultView || 'dayGridMonth', // dayGridMonth|timeGridWeek|timeGridDay|listWeek
defaultDate : new Date(),
dir : $.SOW.globals.direction, // LTR|RTL
header : {
left : 'prev,next, today',
center : 'title',
right : 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
}
};
*/
data-fullcalendar-custom="customCalendar"
<script>
var customCalendar = {
// your custom fullcalendar
};
</script>
++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
// HINT - PROGRAMATICALLY AJAX MODAL
if(typeof $.SOW.core.ajax_modal === 'object') {
// Programtically Create Modal : url , 'modal-md', 'true' (centered), 'null|static' (backdrop), callback
$.SOW.core.ajax_modal.createFromThinAir('_ajax/fullcalendar_event_create.html', 'modal-md', 'true', null, function() {/* callback */});
}
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
// CREATE|UPDATE FORMS ARE SEDING VARIABLES (via POST) IN THIS FORMAT:
Array
(
[action] => add_event
[id] =>
[start] => 2019-08-20 06:03
[end] =>
[startRecur] => 2019-08-23 06:03
[endRecur] =>
[daysOfWeek] => Array // recurency days
(
[0] => 0 // 0 = Sunday
[1] => 3
)
[title] => event title
[url] =>
[className] => bg-primary border-primary text-white
[description] =>
)
[
{
"id": "1",
"title": "All Day Event",
"description":"",
"start": "2019-08-01",
"className": "bg-primary-soft border-primary"
},{
"id": "2",
"title": "Long Event",
"description":"",
"start": "2019-08-07T08:15:00",
"end": "2019-08-10T03:20:00",
"className": "bg-primary border-primary text-white"
},{
"id": "3",
"title": "Repeating Event",
"description":"",
"start": "2019-08-09T16:00:00",
"startRecur":"2019-08-07",
"endRecur":"2020-08-01",
"daysOfWeek":[0],
"className": "bg-danger border-danger text-white"
},{
"id": "4",
"title": "Important Event",
"description":"",
"start": "2019-08-16T16:00:00",
"className": "bg-warning border-warning text-dark"
},{
"id": "5",
"title": "Conference",
"description":"",
"start": "2019-08-11",
"end": "2019-08-13",
"className": "bg-primary border-primary text-white"
},{
"id": "6",
"title": "Meeting",
"description":"",
"start": "2019-08-12T10:30:00",
"end": "2019-08-12T12:30:00",
"className": "bg-primary border-primary text-white"
},{
"id": "7",
"title": "Lunch",
"description":"",
"start": "2019-08-12T12:00:00",
"className": "bg-primary border-primary text-white"
},{
"id": "8",
"title": "Meeting",
"description":"",
"start": "2019-08-12T14:30:00",
"className": "bg-primary border-primary text-white"
},{
"id": "9",
"title": "Birthday Party",
"description":"",
"start": "2019-08-13T07:00:00",
"className": "bg-primary border-primary text-white"
},{
"id": "10",
"title": "Click for Google",
"url": "http://google.com/",
"description":"",
"start": "2019-08-28",
"className": "bg-primary border-primary text-white"
}
]
# Installed via NPM
npm install @fullcalendar/core
npm install @fullcalendar/daygrid
npm install @fullcalendar/timegrid
npm install @fullcalendar/interaction
npm install @fullcalendar/bootstrap
npm install @fullcalendar/list
npm install @fullcalendar/google-calendar