You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
5.4 KiB
217 lines
5.4 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
*
|
||
|
* # Fullcalendar advanced options
|
||
|
*
|
||
|
* Specific JS code additions for extra_fullcalendar_advanced.html page
|
||
|
*
|
||
|
* Version: 1.0
|
||
|
* Latest update: Aug 1, 2015
|
||
|
*
|
||
|
* ---------------------------------------------------------------------------- */
|
||
|
|
||
|
$(function() {
|
||
|
|
||
|
|
||
|
// Add events
|
||
|
// ------------------------------
|
||
|
|
||
|
// Default events
|
||
|
var events = [
|
||
|
{
|
||
|
title: 'All Day Event',
|
||
|
start: '2014-11-01'
|
||
|
},
|
||
|
{
|
||
|
title: 'Long Event',
|
||
|
start: '2014-11-07',
|
||
|
end: '2014-11-10'
|
||
|
},
|
||
|
{
|
||
|
id: 999,
|
||
|
title: 'Repeating Event',
|
||
|
start: '2014-11-09T16:00:00'
|
||
|
},
|
||
|
{
|
||
|
id: 999,
|
||
|
title: 'Repeating Event',
|
||
|
start: '2014-11-16T16:00:00'
|
||
|
},
|
||
|
{
|
||
|
title: 'Conference',
|
||
|
start: '2014-11-11',
|
||
|
end: '2014-11-13'
|
||
|
},
|
||
|
{
|
||
|
title: 'Meeting',
|
||
|
start: '2014-11-12T10:30:00',
|
||
|
end: '2014-11-12T12:30:00'
|
||
|
},
|
||
|
{
|
||
|
title: 'Lunch',
|
||
|
start: '2014-11-12T12:00:00'
|
||
|
},
|
||
|
{
|
||
|
title: 'Meeting',
|
||
|
start: '2014-11-12T14:30:00'
|
||
|
},
|
||
|
{
|
||
|
title: 'Happy Hour',
|
||
|
start: '2014-11-12T17:30:00'
|
||
|
},
|
||
|
{
|
||
|
title: 'Dinner',
|
||
|
start: '2014-11-12T20:00:00'
|
||
|
},
|
||
|
{
|
||
|
title: 'Birthday Party',
|
||
|
start: '2014-11-13T07:00:00'
|
||
|
},
|
||
|
{
|
||
|
title: 'Click for Google',
|
||
|
url: 'http://google.com/',
|
||
|
start: '2014-11-28'
|
||
|
}
|
||
|
];
|
||
|
|
||
|
|
||
|
// Event colors
|
||
|
var eventColors = [
|
||
|
{
|
||
|
title: 'All Day Event',
|
||
|
start: '2014-11-01',
|
||
|
color: '#EF5350'
|
||
|
},
|
||
|
{
|
||
|
title: 'Long Event',
|
||
|
start: '2014-11-07',
|
||
|
end: '2014-11-10',
|
||
|
color: '#26A69A'
|
||
|
},
|
||
|
{
|
||
|
id: 999,
|
||
|
title: 'Repeating Event',
|
||
|
start: '2014-11-09T16:00:00',
|
||
|
color: '#26A69A'
|
||
|
},
|
||
|
{
|
||
|
id: 999,
|
||
|
title: 'Repeating Event',
|
||
|
start: '2014-11-16T16:00:00',
|
||
|
color: '#5C6BC0'
|
||
|
},
|
||
|
{
|
||
|
title: 'Conference',
|
||
|
start: '2014-11-11',
|
||
|
end: '2014-11-13',
|
||
|
color: '#546E7A'
|
||
|
},
|
||
|
{
|
||
|
title: 'Meeting',
|
||
|
start: '2014-11-12T10:30:00',
|
||
|
end: '2014-11-12T12:30:00',
|
||
|
color: '#546E7A'
|
||
|
},
|
||
|
{
|
||
|
title: 'Lunch',
|
||
|
start: '2014-11-12T12:00:00',
|
||
|
color: '#546E7A'
|
||
|
},
|
||
|
{
|
||
|
title: 'Meeting',
|
||
|
start: '2014-11-12T14:30:00',
|
||
|
color: '#546E7A'
|
||
|
},
|
||
|
{
|
||
|
title: 'Happy Hour',
|
||
|
start: '2014-11-12T17:30:00',
|
||
|
color: '#546E7A'
|
||
|
},
|
||
|
{
|
||
|
title: 'Dinner',
|
||
|
start: '2014-11-12T20:00:00',
|
||
|
color: '#546E7A'
|
||
|
},
|
||
|
{
|
||
|
title: 'Birthday Party',
|
||
|
start: '2014-11-13T07:00:00',
|
||
|
color: '#546E7A'
|
||
|
},
|
||
|
{
|
||
|
title: 'Click for Google',
|
||
|
url: 'http://google.com/',
|
||
|
start: '2014-11-28',
|
||
|
color: '#FF7043'
|
||
|
}
|
||
|
];
|
||
|
|
||
|
|
||
|
|
||
|
// External events
|
||
|
// ------------------------------
|
||
|
|
||
|
// Add switcher for events removal
|
||
|
var remove = document.querySelector('.switch');
|
||
|
var removeInit = new Switchery(remove);
|
||
|
|
||
|
|
||
|
// Initialize the calendar
|
||
|
$('.fullcalendar-external').fullCalendar({
|
||
|
header: {
|
||
|
left: 'prev,next today',
|
||
|
center: 'title',
|
||
|
right: 'month,agendaWeek,agendaDay'
|
||
|
},
|
||
|
editable: true,
|
||
|
defaultDate: '2014-11-12',
|
||
|
events: eventColors,
|
||
|
lang: 'en',
|
||
|
droppable: true, // this allows things to be dropped onto the calendar
|
||
|
drop: function() {
|
||
|
if ($('#drop-remove').is(':checked')) { // is the "remove after drop" checkbox checked?
|
||
|
$(this).remove(); // if so, remove the element from the "Draggable Events" list
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
// Initialize the external events
|
||
|
$('#external-events .fc-event').each(function() {
|
||
|
|
||
|
// Different colors for events
|
||
|
$(this).css({'backgroundColor': $(this).data('color'), 'borderColor': $(this).data('color')});
|
||
|
|
||
|
// Store data so the calendar knows to render an event upon drop
|
||
|
$(this).data('event', {
|
||
|
title: $.trim($(this).html()), // use the element's text as the event title
|
||
|
color: $(this).data('color'),
|
||
|
stick: true // maintain when user navigates (see docs on the renderEvent method)
|
||
|
});
|
||
|
|
||
|
// Make the event draggable using jQuery UI
|
||
|
$(this).draggable({
|
||
|
zIndex: 999,
|
||
|
revert: true, // will cause the event to go back to its
|
||
|
revertDuration: 0 // original position after the drag
|
||
|
});
|
||
|
});
|
||
|
|
||
|
|
||
|
|
||
|
// RTL direction
|
||
|
// ------------------------------
|
||
|
|
||
|
$('.fullcalendar-rtl').fullCalendar({
|
||
|
header: {
|
||
|
left: 'prev,next today',
|
||
|
center: 'title',
|
||
|
right: 'month,agendaWeek,agendaDay'
|
||
|
},
|
||
|
defaultDate: '2014-11-12',
|
||
|
editable: true,
|
||
|
isRTL: true,
|
||
|
lang: 'ar',
|
||
|
events: events
|
||
|
});
|
||
|
|
||
|
});
|