mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-03 22:37:03 +00:00
fullcalendar: Provides its own types (#22350)
This commit is contained in:
Andy
@@ -414,6 +414,12 @@
|
||||
"sourceRepoURL": "http://foundation.zurb.com/",
|
||||
"asOfVersion": "6.4.3"
|
||||
},
|
||||
{
|
||||
"libraryName": "FullCalendar",
|
||||
"typingsPackageName": "fullcalendar",
|
||||
"sourceRepoURL": "http://arshaw.com/fullcalendar/",
|
||||
"asOfVersion": "3.8.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "gaea-model",
|
||||
"typingsPackageName": "gaea-model",
|
||||
|
||||
@@ -1,854 +0,0 @@
|
||||
/// <reference types="jqueryui" />
|
||||
|
||||
import * as FullCalendar from 'fullcalendar';
|
||||
import * as moment from 'moment';
|
||||
|
||||
// All examples from http://arshaw.com/fullcalendar/docs/
|
||||
|
||||
$('#calendar').fullCalendar({});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
weekends: false
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
dayClick() {
|
||||
alert('a day has been clicked!');
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('next');
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: 'http://www.google.com/your_feed_url/'
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: {
|
||||
url: 'http://www.google.com/your_feed_url/',
|
||||
className: 'gcal-event', // an option!
|
||||
currentTimezone: 'America/Chicago' // an option!
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// source with no options
|
||||
"http://www.google.com/your_feed_url1/",
|
||||
|
||||
// source with no options
|
||||
"http://www.google.com/your_feed_url2/",
|
||||
|
||||
// source WITH options
|
||||
{
|
||||
url: "http://www.google.com/your_feed_url3/",
|
||||
className: 'nice-event'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
height: 650
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('option', 'height', 700);
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
contentHeight: 600
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('option', 'contentHeight', 650);
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
aspectRatio: 2
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('option', 'aspectRatio', 1.8);
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
viewRender(view) {
|
||||
alert('The new title of the view is ' + view.title);
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
windowResize(view) {
|
||||
alert('The calendar has adjusted to a window resize');
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('render');
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
dragOpacity: .5
|
||||
});
|
||||
|
||||
const view = $('#calendar').fullCalendar('getView');
|
||||
alert("The view's title is " + view.title);
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,basicWeek,basicDay'
|
||||
},
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1)
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d - 3, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,basicWeek,basicDay'
|
||||
},
|
||||
defaultView: 'basicWeek',
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1)
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d - 3, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,basicWeek,basicDay'
|
||||
},
|
||||
defaultView: 'basicDay',
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
id: 1,
|
||||
title: "Long Event",
|
||||
start: new Date(y, m, d, 14, 0),
|
||||
end: new Date(y, m, d + 3),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Repeating Event",
|
||||
start: new Date(y, m, d - 1),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Repeating Event",
|
||||
start: new Date(y, m, d + 6),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Meeting",
|
||||
start: new Date(y, m, d, 9, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Click for Facebook",
|
||||
start: new Date(y, m, d, 16),
|
||||
end: new Date(y, m, d),
|
||||
url: "http://facebook.com/",
|
||||
allDay: false
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
editable: true,
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
defaultView: 'agendaWeek',
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1)
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d - 3, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
defaultView: 'agendaDay',
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
id: 1,
|
||||
title: "Long Event",
|
||||
start: new Date(y, m, d),
|
||||
end: new Date(y, m, d + 3),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Repeating Event",
|
||||
start: new Date(y, m, d - 1),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Repeating Event",
|
||||
start: new Date(y, m, d + 6),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Meeting",
|
||||
start: new Date(y, m, d, 10, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Click for Facebook",
|
||||
start: new Date(y, m, d, 11, 30),
|
||||
end: new Date(y, m, d),
|
||||
url: "http://facebook.com/",
|
||||
allDay: false
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$('#my-prev-button').click(() => {
|
||||
$('#calendar').fullCalendar('prev');
|
||||
});
|
||||
|
||||
$('#my-next-button').click(() => {
|
||||
$('#calendar').fullCalendar('next');
|
||||
});
|
||||
|
||||
$('#my-today-button').click(() => {
|
||||
$('#calendar').fullCalendar('today');
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('gotoDate', 1, 0, 1);
|
||||
|
||||
$('#my-button').click(() => {
|
||||
const d = $('#calendar').fullCalendar('getDate');
|
||||
alert("The current date of the calendar is " + d);
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
{
|
||||
title: 'My Event',
|
||||
start: '2010-01-01T14:30:00',
|
||||
allDay: false
|
||||
}
|
||||
// other events here...
|
||||
],
|
||||
timeFormat: 'H(:mm)' // uppercase H for 24-hour clock
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
buttonText: {
|
||||
prev: '<',
|
||||
next: '>'
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
dayClick(date, jsEvent, view) {
|
||||
alert(`Coordinates: ${jsEvent.pageX},${jsEvent.pageY}`);
|
||||
|
||||
alert('Current view: ' + view.name);
|
||||
|
||||
// change the day's background color just for fun
|
||||
$(this).css('background-color', 'red');
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventClick(calEvent, jsEvent, view) {
|
||||
alert('Event: ' + calEvent.title);
|
||||
alert(`Coordinates: ${jsEvent.pageX},${jsEvent.pageY}`);
|
||||
alert('View: ' + view.name);
|
||||
|
||||
// change the border color just for fun
|
||||
$(this).css('border-color', 'red');
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
{
|
||||
title: 'My Event',
|
||||
start: '2010-01-01',
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
// other events here
|
||||
],
|
||||
eventClick(event) {
|
||||
if (event.url) {
|
||||
window.open(event.url);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// your event source
|
||||
{
|
||||
url: '/myfeed.php',
|
||||
type: 'POST',
|
||||
data: {
|
||||
custom_param1: 'something',
|
||||
custom_param2: 'somethingelse'
|
||||
},
|
||||
error() {
|
||||
alert('there was an error while fetching events!');
|
||||
},
|
||||
color: 'yellow', // a non-ajax option
|
||||
textColor: 'black' // a non-ajax option
|
||||
}
|
||||
|
||||
// any other sources...
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: {
|
||||
url: '/myfeed.php',
|
||||
type: 'POST',
|
||||
data: {
|
||||
custom_param1: 'something',
|
||||
custom_param2: 'somethingelse'
|
||||
},
|
||||
error() {
|
||||
alert('there was an error while fetching events!');
|
||||
},
|
||||
color: 'yellow', // a non-ajax option
|
||||
textColor: 'black' // a non-ajax option
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: {
|
||||
url: '/myfeed.php',
|
||||
cache: true
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// your event source
|
||||
{
|
||||
url: '/myfeed.php', // use the `url` property
|
||||
color: 'yellow', // an option!
|
||||
textColor: 'black' // an option!
|
||||
}
|
||||
|
||||
// any other sources...
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: '/myfeed.php'
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
{
|
||||
title: 'event1',
|
||||
start: '2010-01-01'
|
||||
},
|
||||
{
|
||||
title: 'event2',
|
||||
start: '2010-01-05',
|
||||
end: '2010-01-07'
|
||||
},
|
||||
{
|
||||
title: 'event3',
|
||||
start: '2010-01-09 12:30:00',
|
||||
allDay: false // will make the time show
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// your event source
|
||||
{
|
||||
events: [ // put the array in the `events` property
|
||||
{
|
||||
title: 'event1',
|
||||
start: '2010-01-01'
|
||||
},
|
||||
{
|
||||
title: 'event2',
|
||||
start: '2010-01-05',
|
||||
end: '2010-01-07'
|
||||
},
|
||||
{
|
||||
title: 'event3',
|
||||
start: '2010-01-09 12:30:00',
|
||||
}
|
||||
],
|
||||
color: 'black', // an option!
|
||||
textColor: 'yellow' // an option!
|
||||
}
|
||||
|
||||
// any other event sources...
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events(start: moment.Moment, end: moment.Moment, timezone: string | boolean, callback: (events: FullCalendar.EventObject[]) => void) {
|
||||
$.ajax({
|
||||
url: 'myxmlfeed.php',
|
||||
dataType: 'xml',
|
||||
data: {
|
||||
// our hypothetical feed requires UNIX timestamps
|
||||
start: Math.round(start.toDate().getTime() / 1000),
|
||||
end: Math.round(end.toDate().getTime() / 1000)
|
||||
},
|
||||
success(doc) {
|
||||
const events: any[] = [];
|
||||
$(doc).find('event').each(() => {
|
||||
events.push({
|
||||
title: $(this).attr('title'),
|
||||
start: $(this).attr('start') // will be parsed
|
||||
});
|
||||
});
|
||||
callback(events);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// your event source
|
||||
{
|
||||
events(start: moment.Moment, end: moment.Moment, timezone: string | boolean, callback: (events: FullCalendar.EventObject[]) => void) {
|
||||
// ...
|
||||
},
|
||||
color: 'yellow', // an option!
|
||||
textColor: 'black' // an option!
|
||||
}
|
||||
// any other sources...
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
'/feed1.php',
|
||||
'/feed2.php'
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventClick(event, element) {
|
||||
event.title = "CLICKED!";
|
||||
|
||||
$('#calendar').fullCalendar('updateEvent', event);
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
// my event data
|
||||
],
|
||||
eventColor: '#378006'
|
||||
});
|
||||
|
||||
interface JQueryQTip extends JQuery {
|
||||
qtip(options: Object): JQuery; // dummy plugin interface
|
||||
}
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
{
|
||||
title: 'My Event',
|
||||
start: '2010-01-01',
|
||||
description: 'This is a cool event'
|
||||
}
|
||||
// more events here
|
||||
],
|
||||
eventRender(event: FullCalendar.EventObject, element: JQueryQTip, view: FullCalendar.ViewObject) {
|
||||
element.qtip({
|
||||
content: event.description
|
||||
});
|
||||
}
|
||||
});
|
||||
$('#my-draggable').draggable({
|
||||
revert: true, // immediately snap back to original position
|
||||
revertDuration: 0 //
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
droppable: true,
|
||||
drop(date, allDay) {
|
||||
alert(`Dropped on ${date} with allDay=${allDay}`);
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
droppable: true,
|
||||
dropAccept: '.cool-event',
|
||||
drop() {
|
||||
alert('dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$('#draggable1').draggable();
|
||||
$('#draggable2').draggable();
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1)
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d - 3, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
/* initialize the external events
|
||||
-----------------------------------------------------------------*/
|
||||
$('#external-events div.external-event').each(() => {
|
||||
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
|
||||
// it doesn't need to have a start or end
|
||||
const eventObject = {
|
||||
title: $.trim($(this).text()) // use the element's text as the event title
|
||||
};
|
||||
|
||||
// store the Event Object in the DOM element so we can get to it later
|
||||
$(this).data('eventObject', eventObject);
|
||||
|
||||
// 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
|
||||
});
|
||||
});
|
||||
/* initialize the calendar
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
editable: true,
|
||||
droppable: true, // this allows things to be dropped onto the calendar !!!
|
||||
drop(date, allDay) { // this function is called when something is dropped
|
||||
|
||||
// retrieve the dropped element's stored Event Object
|
||||
const originalEventObject = $(this).data('eventObject');
|
||||
|
||||
// we need to copy it, so that multiple events don't have a reference to the same object
|
||||
const copiedEventObject: any = $.extend({}, originalEventObject);
|
||||
|
||||
// assign it the date that was reported
|
||||
copiedEventObject.start = date;
|
||||
copiedEventObject.allDay = allDay;
|
||||
|
||||
// render the event on the calendar
|
||||
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
|
||||
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
|
||||
|
||||
// is the "remove after drop" checkbox checked?
|
||||
if ($('#drop-remove').is(':checked')) {
|
||||
// if so, remove the element from the "Draggable Events" list
|
||||
$(this).remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
editable: true,
|
||||
events: [{
|
||||
id: 'test1',
|
||||
title: 'event full of features',
|
||||
start: new Date(y, m, 1),
|
||||
startEditable: true,
|
||||
allDay: false,
|
||||
url: 'http://www.google.com',
|
||||
className: 'gcal-event',
|
||||
editable: false,
|
||||
durationEditable: false,
|
||||
rendering: 'background',
|
||||
overlap: false,
|
||||
constraint: {
|
||||
start: '10:00',
|
||||
end: '18:00',
|
||||
dow: [ 1, 2 ],
|
||||
// days of week. an array of zero-based day of week integers (0=Sunday)
|
||||
// (Monday-Tuesday in this example)
|
||||
},
|
||||
color: 'white',
|
||||
backgroundColor: 'black',
|
||||
borderColor: 'grey',
|
||||
textColor: 'white',
|
||||
}],
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
editable: true,
|
||||
events: [{
|
||||
id: 'test2',
|
||||
title: 'just an event',
|
||||
start: new Date(y, m, 1),
|
||||
}],
|
||||
eventConstraint: 'businessHours',
|
||||
eventLimit: true,
|
||||
businessHours: [{
|
||||
start: '10:00',
|
||||
end: '18:00',
|
||||
dow: [ 1, 2 ],
|
||||
// days of week. an array of zero-based day of week integers (0=Sunday)
|
||||
// (Monday-Tuesday in this example)
|
||||
}, {
|
||||
start: '09:00',
|
||||
end: '19:00',
|
||||
dow: [ 3, 4 ],
|
||||
}],
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('refetchEventSources', 'http://www.google.com/your_feed_url1/');
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('refetchEvents');
|
||||
Vendored
-1134
File diff suppressed because it is too large
Load Diff
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"moment": ">=2.14.0"
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": false,
|
||||
"noImplicitThis": false,
|
||||
"strictNullChecks": false,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"fullcalendar-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"ban-types": false,
|
||||
"unified-signatures": false
|
||||
}
|
||||
}
|
||||
@@ -1,793 +0,0 @@
|
||||
/// <reference types="jqueryui" />
|
||||
|
||||
// All examples from http://arshaw.com/fullcalendar/docs/
|
||||
|
||||
$('#calendar').fullCalendar({});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
weekends: false
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
dayClick: () => {
|
||||
alert('a day has been clicked!');
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('next');
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: 'http://www.google.com/your_feed_url/'
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: {
|
||||
url: 'http://www.google.com/your_feed_url/',
|
||||
className: 'gcal-event', // an option!
|
||||
currentTimezone: 'America/Chicago' // an option!
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// source with no options
|
||||
"http://www.google.com/your_feed_url1/",
|
||||
|
||||
// source with no options
|
||||
"http://www.google.com/your_feed_url2/",
|
||||
|
||||
// source WITH options
|
||||
{
|
||||
url: "http://www.google.com/your_feed_url3/",
|
||||
className: 'nice-event'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
height: 650
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('option', 'height', 700);
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
contentHeight: 600
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('option', 'contentHeight', 650);
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
aspectRatio: 2
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('option', 'aspectRatio', 1.8);
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
viewRender: view => {
|
||||
alert('The new title of the view is ' + view.title);
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
windowResize: view => {
|
||||
alert('The calendar has adjusted to a window resize');
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('render');
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
dragOpacity: .5
|
||||
});
|
||||
|
||||
const view = $('#calendar').fullCalendar('getView');
|
||||
alert("The view's title is " + view.title);
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,basicWeek,basicDay'
|
||||
},
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1)
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d - 3, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,basicWeek,basicDay'
|
||||
},
|
||||
defaultView: 'basicWeek',
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1)
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d - 3, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,basicWeek,basicDay'
|
||||
},
|
||||
defaultView: 'basicDay',
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
id: 1,
|
||||
title: "Long Event",
|
||||
start: new Date(y, m, d, 14, 0),
|
||||
end: new Date(y, m, d + 3),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Repeating Event",
|
||||
start: new Date(y, m, d - 1),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Repeating Event",
|
||||
start: new Date(y, m, d + 6),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Meeting",
|
||||
start: new Date(y, m, d, 9, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Click for Facebook",
|
||||
start: new Date(y, m, d, 16),
|
||||
end: new Date(y, m, d),
|
||||
url: "http://facebook.com/",
|
||||
allDay: false
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
editable: true,
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
defaultView: 'agendaWeek',
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1)
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d - 3, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
defaultView: 'agendaDay',
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
id: 1,
|
||||
title: "Long Event",
|
||||
start: new Date(y, m, d),
|
||||
end: new Date(y, m, d + 3),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Repeating Event",
|
||||
start: new Date(y, m, d - 1),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Repeating Event",
|
||||
start: new Date(y, m, d + 6),
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Meeting",
|
||||
start: new Date(y, m, d, 10, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Click for Facebook",
|
||||
start: new Date(y, m, d, 11, 30),
|
||||
end: new Date(y, m, d),
|
||||
url: "http://facebook.com/",
|
||||
allDay: false
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$('#my-prev-button').click(() => {
|
||||
$('#calendar').fullCalendar('prev');
|
||||
});
|
||||
|
||||
$('#my-next-button').click(() => {
|
||||
$('#calendar').fullCalendar('next');
|
||||
});
|
||||
|
||||
$('#my-today-button').click(() => {
|
||||
$('#calendar').fullCalendar('today');
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('gotoDate', 1, 0, 1);
|
||||
|
||||
$('#my-button').click(() => {
|
||||
const d = $('#calendar').fullCalendar('getDate');
|
||||
alert("The current date of the calendar is " + d);
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
{
|
||||
title: 'My Event',
|
||||
start: '2010-01-01T14:30:00',
|
||||
allDay: false
|
||||
}
|
||||
// other events here...
|
||||
],
|
||||
timeFormat: 'H(:mm)' // uppercase H for 24-hour clock
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
buttonText: {
|
||||
prev: '<',
|
||||
next: '>'
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
dayClick(date, allDay, jsEvent, view) {
|
||||
if (allDay) {
|
||||
alert('Clicked on the entire day: ' + date);
|
||||
} else {
|
||||
alert('Clicked on the slot: ' + date);
|
||||
}
|
||||
|
||||
alert(`Coordinates: ${jsEvent.pageX},${jsEvent.pageY}`);
|
||||
|
||||
alert('Current view: ' + view.name);
|
||||
|
||||
// change the day's background color just for fun
|
||||
$(this).css('background-color', 'red');
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventClick(calEvent, jsEvent, view) {
|
||||
alert('Event: ' + calEvent.title);
|
||||
alert(`Coordinates: ${jsEvent.pageX},${jsEvent.pageY}`);
|
||||
alert('View: ' + view.name);
|
||||
|
||||
// change the border color just for fun
|
||||
$(this).css('border-color', 'red');
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
{
|
||||
title: 'My Event',
|
||||
start: '2010-01-01',
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
// other events here
|
||||
],
|
||||
eventClick(event) {
|
||||
if (event.url) {
|
||||
window.open(event.url);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// your event source
|
||||
{
|
||||
url: '/myfeed.php',
|
||||
type: 'POST',
|
||||
data: {
|
||||
custom_param1: 'something',
|
||||
custom_param2: 'somethingelse'
|
||||
},
|
||||
error: () => {
|
||||
alert('there was an error while fetching events!');
|
||||
},
|
||||
color: 'yellow', // a non-ajax option
|
||||
textColor: 'black' // a non-ajax option
|
||||
}
|
||||
|
||||
// any other sources...
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: {
|
||||
url: '/myfeed.php',
|
||||
type: 'POST',
|
||||
data: {
|
||||
custom_param1: 'something',
|
||||
custom_param2: 'somethingelse'
|
||||
},
|
||||
error: () => {
|
||||
alert('there was an error while fetching events!');
|
||||
},
|
||||
color: 'yellow', // a non-ajax option
|
||||
textColor: 'black' // a non-ajax option
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: {
|
||||
url: '/myfeed.php',
|
||||
cache: true
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// your event source
|
||||
{
|
||||
url: '/myfeed.php', // use the `url` property
|
||||
color: 'yellow', // an option!
|
||||
textColor: 'black' // an option!
|
||||
}
|
||||
|
||||
// any other sources...
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: '/myfeed.php'
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
{
|
||||
title: 'event1',
|
||||
start: '2010-01-01'
|
||||
},
|
||||
{
|
||||
title: 'event2',
|
||||
start: '2010-01-05',
|
||||
end: '2010-01-07'
|
||||
},
|
||||
{
|
||||
title: 'event3',
|
||||
start: '2010-01-09 12:30:00',
|
||||
allDay: false // will make the time show
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// your event source
|
||||
{
|
||||
events: [ // put the array in the `events` property
|
||||
{
|
||||
title: 'event1',
|
||||
start: '2010-01-01'
|
||||
},
|
||||
{
|
||||
title: 'event2',
|
||||
start: '2010-01-05',
|
||||
end: '2010-01-07'
|
||||
},
|
||||
{
|
||||
title: 'event3',
|
||||
start: '2010-01-09 12:30:00',
|
||||
}
|
||||
],
|
||||
color: 'black', // an option!
|
||||
textColor: 'yellow' // an option!
|
||||
}
|
||||
|
||||
// any other event sources...
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events(start: any, end: any, callback: any) {
|
||||
$.ajax({
|
||||
url: 'myxmlfeed.php',
|
||||
dataType: 'xml',
|
||||
data: {
|
||||
// our hypothetical feed requires UNIX timestamps
|
||||
start: Math.round(start.getTime() / 1000),
|
||||
end: Math.round(end.getTime() / 1000)
|
||||
},
|
||||
success(doc) {
|
||||
const events: any[] = [];
|
||||
$(doc).find('event').each(() => {
|
||||
events.push({
|
||||
title: $(this).attr('title'),
|
||||
start: $(this).attr('start') // will be parsed
|
||||
});
|
||||
});
|
||||
callback(events);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
// your event source
|
||||
{
|
||||
events(start: any, end: any, callback: any) {
|
||||
// ...
|
||||
},
|
||||
color: 'yellow', // an option!
|
||||
textColor: 'black' // an option!
|
||||
}
|
||||
|
||||
// any other sources...
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventSources: [
|
||||
'/feed1.php',
|
||||
'/feed2.php'
|
||||
]
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
eventClick(event, element) {
|
||||
event.title = "CLICKED!";
|
||||
|
||||
$('#calendar').fullCalendar('updateEvent', event);
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
// my event data
|
||||
],
|
||||
eventColor: '#378006'
|
||||
});
|
||||
|
||||
interface EventWithDescription extends FullCalendar.EventObject {
|
||||
description: string;
|
||||
}
|
||||
interface JQuery {
|
||||
qtip: any; // dummy plugin interface
|
||||
}
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
events: [
|
||||
{
|
||||
title: 'My Event',
|
||||
start: '2010-01-01',
|
||||
description: 'This is a cool event'
|
||||
}
|
||||
// more events here
|
||||
],
|
||||
eventRender(event: EventWithDescription, element: any) {
|
||||
element.qtip({
|
||||
content: event.description
|
||||
});
|
||||
}
|
||||
});
|
||||
$('#my-draggable').draggable({
|
||||
revert: true, // immediately snap back to original position
|
||||
revertDuration: 0 //
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
droppable: true,
|
||||
drop(date, allDay) {
|
||||
alert(`Dropped on ${date} with allDay=${allDay}`);
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
droppable: true,
|
||||
dropAccept: '.cool-event',
|
||||
drop: () => {
|
||||
alert('dropped!');
|
||||
}
|
||||
});
|
||||
|
||||
$('#draggable1').draggable();
|
||||
$('#draggable2').draggable();
|
||||
|
||||
$(document).ready(() => {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
theme: true,
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1)
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d - 3, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: false
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
/* initialize the external events
|
||||
-----------------------------------------------------------------*/
|
||||
$('#external-events div.external-event').each(() => {
|
||||
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
|
||||
// it doesn't need to have a start or end
|
||||
const eventObject = {
|
||||
title: $.trim($(this).text()) // use the element's text as the event title
|
||||
};
|
||||
|
||||
// store the Event Object in the DOM element so we can get to it later
|
||||
$(this).data('eventObject', eventObject);
|
||||
|
||||
// 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
|
||||
});
|
||||
});
|
||||
/* initialize the calendar
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
editable: true,
|
||||
droppable: true, // this allows things to be dropped onto the calendar !!!
|
||||
drop(date, allDay) { // this function is called when something is dropped
|
||||
|
||||
// retrieve the dropped element's stored Event Object
|
||||
const originalEventObject = $(this).data('eventObject');
|
||||
|
||||
// we need to copy it, so that multiple events don't have a reference to the same object
|
||||
const copiedEventObject: any = $.extend({}, originalEventObject);
|
||||
|
||||
// assign it the date that was reported
|
||||
copiedEventObject.start = date;
|
||||
copiedEventObject.allDay = allDay;
|
||||
|
||||
// render the event on the calendar
|
||||
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
|
||||
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
|
||||
|
||||
// is the "remove after drop" checkbox checked?
|
||||
if ($('#drop-remove').is(':checked')) {
|
||||
// if so, remove the element from the "Draggable Events" list
|
||||
$(this).remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#calendar').fullCalendar('refetchEvents');
|
||||
Vendored
-427
@@ -1,427 +0,0 @@
|
||||
// Type definitions for FullCalendar 1.6
|
||||
// Project: http://arshaw.com/fullcalendar/
|
||||
// Definitions by: Neil Stalker <https://github.com/nestalk>, Marcelo Camargo <https://github.com/hasellcamargo>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
|
||||
/// <reference types="jquery"/>
|
||||
import * as moment from "moment";
|
||||
|
||||
declare global {
|
||||
namespace FullCalendar {
|
||||
interface Calendar {
|
||||
/**
|
||||
* Formats a Date object into a string.
|
||||
*/
|
||||
formatDate(date: Date, format: string, options?: Options): string;
|
||||
|
||||
/**
|
||||
* Formats a date range (two Date objects) into a string.
|
||||
*/
|
||||
formatDates(date1: Date, date2: Date, format: string, options?: Options): string;
|
||||
|
||||
/**
|
||||
* Parses a string into a Date object.
|
||||
*/
|
||||
parseDate(dateString: string, ignoreTimezone?: boolean): Date;
|
||||
|
||||
/**
|
||||
* Parses an ISO8601 string into a Date object.
|
||||
*/
|
||||
parseISO8601(dateString: string, ignoreTimezone?: boolean): Date;
|
||||
|
||||
/**
|
||||
* Gets the version of Fullcalendar
|
||||
*/
|
||||
version: string;
|
||||
}
|
||||
|
||||
interface BusinessHours {
|
||||
start: moment.Duration;
|
||||
end: moment.Duration;
|
||||
dow: number[];
|
||||
}
|
||||
|
||||
interface Timespan {
|
||||
start: moment.Moment;
|
||||
end: moment.Moment;
|
||||
}
|
||||
|
||||
interface Options extends AgendaOptions, EventDraggingResizingOptions, DroppingExternalElementsOptions, SelectionOptions {
|
||||
// General display - http://arshaw.com/fullcalendar/docs/display/
|
||||
|
||||
header?: {
|
||||
left: string;
|
||||
center: string;
|
||||
right: string;
|
||||
};
|
||||
theme?: boolean;
|
||||
buttonIcons?: {
|
||||
prev: string;
|
||||
next: string;
|
||||
};
|
||||
firstDay?: number;
|
||||
isRTL?: boolean;
|
||||
weekends?: boolean;
|
||||
hiddenDays?: number[];
|
||||
weekMode?: string;
|
||||
weekNumbers?: boolean;
|
||||
weekNumberCalculation?: any; // String/Function
|
||||
businessHours?: boolean | BusinessHours;
|
||||
height?: number;
|
||||
contentHeight?: number;
|
||||
aspectRatio?: number;
|
||||
handleWindowResize?: boolean;
|
||||
viewRender?(view: ViewObject, element: JQuery): void;
|
||||
viewDestroy?(view: ViewObject, element: JQuery): void;
|
||||
dayRender?(date: Date, cell: HTMLTableDataCellElement): void;
|
||||
windowResize?(view: ViewObject): void;
|
||||
|
||||
// Timezone
|
||||
timezone?: string | boolean;
|
||||
now?: moment.Moment | Date | string | (() => moment.Moment);
|
||||
|
||||
// Views - http://arshaw.com/fullcalendar/docs/views/
|
||||
|
||||
defaultView?: string;
|
||||
|
||||
// Current Date - http://arshaw.com/fullcalendar/docs/current_date/
|
||||
|
||||
defaultDate?: moment.Moment | Date | string;
|
||||
year?: number;
|
||||
month?: number;
|
||||
date?: number;
|
||||
|
||||
// Text/Time Customization - http://arshaw.com/fullcalendar/docs/text/
|
||||
|
||||
timeFormat?: any; // String/ViewOptionHash
|
||||
columnFormat?: any; // String/ViewOptionHash
|
||||
titleFormat?: any; // String/ViewOptionHash
|
||||
|
||||
buttonText?: ButtonTextObject;
|
||||
monthNames?: string[];
|
||||
monthNamesShort?: string[];
|
||||
dayNames?: string[];
|
||||
dayNamesShort?: string[];
|
||||
weekNumberTitle?: string;
|
||||
|
||||
// Clicking & Hovering - http://arshaw.com/fullcalendar/docs/mouse/
|
||||
|
||||
dayClick?(date: Date, allDay: boolean, jsEvent: MouseEvent, view: ViewObject): void;
|
||||
eventClick?(event: EventObject, jsEvent: MouseEvent, view: ViewObject): any; // return type boolean or void
|
||||
eventMouseover?(event: EventObject, jsEvent: MouseEvent, view: ViewObject): void;
|
||||
eventMouseout?(event: EventObject, jsEvent: MouseEvent, view: ViewObject): void;
|
||||
|
||||
// Event Data - http://arshaw.com/fullcalendar/docs/event_data/
|
||||
|
||||
/**
|
||||
* This has one of the following types:
|
||||
*
|
||||
* - EventObject[]
|
||||
* - string (JSON feed)
|
||||
* - (start: Date | string, end: Date | string, callback: {(events: EventObject[]) => void;}) => void;
|
||||
*/
|
||||
events?: any;
|
||||
|
||||
/**
|
||||
* An array, each element being one of the following types:
|
||||
*
|
||||
* - EventSource
|
||||
* - EventObject[]
|
||||
* - string (JSON feed)
|
||||
* - (start: Date | string, end: Date | string, callback: {(events: EventObject[]) => void;}) => void;
|
||||
*/
|
||||
eventSources?: any[];
|
||||
|
||||
allDayDefault?: boolean;
|
||||
ignoreTimezone?: boolean;
|
||||
startParam?: string;
|
||||
endParam?: string;
|
||||
lazyFetching?: boolean;
|
||||
eventDataTransform?(eventData: any): EventObject;
|
||||
loading?(isLoading: boolean, view: ViewObject): void;
|
||||
|
||||
// Event Rendering - http://arshaw.com/fullcalendar/docs/event_rendering/
|
||||
|
||||
eventColor?: string;
|
||||
eventBackgroundColor?: string;
|
||||
eventBorderColor?: string;
|
||||
eventTextColor?: string;
|
||||
eventRender?(event: EventObject, element: HTMLDivElement, view: ViewObject): void;
|
||||
eventAfterRender?(event: EventObject, element: HTMLDivElement, view: ViewObject): void;
|
||||
eventAfterAllRender?(view: ViewObject): void;
|
||||
eventDestroy?(event: EventObject, element: JQuery, view: ViewObject): void;
|
||||
}
|
||||
|
||||
interface ViewOptionHash {
|
||||
month?: any;
|
||||
week?: any;
|
||||
day?: any;
|
||||
agenda?: any;
|
||||
agendaDay?: any;
|
||||
agendaWeek?: any;
|
||||
basic?: any;
|
||||
basicDay?: any;
|
||||
basicWeek?: any;
|
||||
''?: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Agenda Options - http://arshaw.com/fullcalendar/docs/agenda/
|
||||
*/
|
||||
interface AgendaOptions {
|
||||
allDaySlot?: boolean;
|
||||
allDayText?: string;
|
||||
slotDuration?: moment.Duration;
|
||||
slotLabelFormat?: string;
|
||||
slotLabelInterval?: moment.Duration;
|
||||
snapDuration?: moment.Duration;
|
||||
scrollTime?: moment.Duration;
|
||||
minTime?: moment.Duration; // Integer/String
|
||||
maxTime?: moment.Duration; // Integer/String
|
||||
slotEventOverlap?: boolean;
|
||||
}
|
||||
|
||||
/*
|
||||
* Event Dragging & Resizing
|
||||
*/
|
||||
interface EventDraggingResizingOptions {
|
||||
editable?: boolean;
|
||||
eventStartEditable?: boolean;
|
||||
eventDurationEditable?: boolean;
|
||||
dragRevertDuration?: number; // integer, milliseconds
|
||||
dragOpacity?: number; // float
|
||||
dragScroll?: boolean;
|
||||
eventOverlap?: boolean | ((stillEvent: EventObject, movingEvent: EventObject) => boolean);
|
||||
eventConstraint?: BusinessHours | Timespan;
|
||||
eventDragStart?(event: EventObject, jsEvent: MouseEvent, ui: any, view: ViewObject): void;
|
||||
eventDragStop?(event: EventObject, jsEvent: MouseEvent, ui: any, view: ViewObject): void;
|
||||
eventDrop?(event: EventObject, delta: moment.Duration, revertFunc: Function, jsEvent: Event, ui: any, view: ViewObject): void;
|
||||
eventResizeStart?(event: EventObject, jsEvent: MouseEvent, ui: any, view: ViewObject): void;
|
||||
eventResizeStop?(event: EventObject, jsEvent: MouseEvent, ui: any, view: ViewObject): void;
|
||||
eventResize?(event: EventObject, delta: moment.Duration, revertFunc: Function, jsEvent: Event, ui: any, view: ViewObject): void;
|
||||
}
|
||||
/*
|
||||
* Selection - http://arshaw.com/fullcalendar/docs/selection/
|
||||
*/
|
||||
interface SelectionOptions {
|
||||
selectable?: boolean;
|
||||
selectHelper?: boolean | ((start: moment.Moment, end: moment.Moment) => HTMLElement);
|
||||
unselectAuto?: boolean;
|
||||
unselectCancel?: string;
|
||||
selectOverlap?: boolean | ((event: EventObject) => boolean);
|
||||
selectConstraint?: Timespan | BusinessHours;
|
||||
select?(start: moment.Moment, end: moment.Moment, jsEvent: MouseEvent, view: ViewObject, resource?: any): void;
|
||||
unselect?(view: ViewObject, jsEvent: Event): void;
|
||||
}
|
||||
|
||||
interface DroppingExternalElementsOptions {
|
||||
droppable?: boolean;
|
||||
dropAccept?: string | ((draggable: any) => boolean);
|
||||
drop?(date: moment.Moment, jsEvent: MouseEvent, ui: any): void;
|
||||
eventReceive?(event: EventObject): void;
|
||||
}
|
||||
|
||||
interface ButtonTextObject {
|
||||
prev?: string;
|
||||
next?: string;
|
||||
prevYear?: string;
|
||||
nextYear?: string;
|
||||
today?: string;
|
||||
month?: string;
|
||||
week?: string;
|
||||
day?: string;
|
||||
}
|
||||
|
||||
interface EventObject extends Timespan {
|
||||
id?: any; // String/number
|
||||
title: string;
|
||||
allDay?: boolean;
|
||||
url?: string;
|
||||
className?: any; // string/Array<string>
|
||||
editable?: boolean;
|
||||
source?: EventSource;
|
||||
color?: string;
|
||||
backgroundColor?: string;
|
||||
borderColor?: string;
|
||||
textColor?: string;
|
||||
rendering?: string;
|
||||
}
|
||||
|
||||
interface ViewObject extends Timespan {
|
||||
name: string;
|
||||
title: string;
|
||||
intervalStart: moment.Moment;
|
||||
intervalEnd: moment.Moment;
|
||||
}
|
||||
|
||||
interface EventSource extends JQueryAjaxSettings {
|
||||
/**
|
||||
* This has one of the following types:
|
||||
*
|
||||
* - EventObject[]
|
||||
* - string (JSON feed)
|
||||
* - (start: Date | string, end: Date | string, callback: {(events: EventObject[]) => void;}) => void;
|
||||
*/
|
||||
events?: any;
|
||||
|
||||
color?: string;
|
||||
backgroundColor?: string;
|
||||
borderColor?: string;
|
||||
textColor?: string;
|
||||
className?: any; // string/Array<string>
|
||||
editable?: boolean;
|
||||
allDayDefault?: boolean;
|
||||
ignoreTimezone?: boolean;
|
||||
eventTransform?: any;
|
||||
startParam?: string;
|
||||
endParam?: string;
|
||||
}
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
/**
|
||||
* Get/Set option value
|
||||
*/
|
||||
fullCalendar(method: 'option', option: string, value?: any): void;
|
||||
|
||||
/**
|
||||
* Immediately forces the calendar to render and/or readjusts its size.
|
||||
*/
|
||||
fullCalendar(method: 'render'): void;
|
||||
|
||||
/**
|
||||
* Restores the element to the state before FullCalendar was initialized.
|
||||
*/
|
||||
fullCalendar(method: 'destroy'): void;
|
||||
|
||||
/**
|
||||
* Returns the View Object for the current view.
|
||||
*/
|
||||
fullCalendar(method: 'getView'): FullCalendar.ViewObject;
|
||||
|
||||
/**
|
||||
* Immediately switches to a different view.
|
||||
*/
|
||||
fullCalendar(method: 'changeView', viewName: string): void;
|
||||
|
||||
/**
|
||||
* Moves the calendar one step back (either by a month, week, or day).
|
||||
*/
|
||||
fullCalendar(method: 'prev'): void;
|
||||
|
||||
/**
|
||||
* Moves the calendar one step forward (either by a month, week, or day).
|
||||
*/
|
||||
fullCalendar(method: 'next'): void;
|
||||
|
||||
/**
|
||||
* Moves the calendar back one year.
|
||||
*/
|
||||
fullCalendar(method: 'prevYear'): void;
|
||||
|
||||
/**
|
||||
* Moves the calendar forward one year.
|
||||
*/
|
||||
fullCalendar(method: 'nextYear'): void;
|
||||
|
||||
/**
|
||||
* Moves the calendar to the current date.
|
||||
*/
|
||||
fullCalendar(method: 'today'): void;
|
||||
|
||||
/**
|
||||
* Moves the calendar to an arbitrary year/month/date.
|
||||
*/
|
||||
fullCalendar(method: 'gotoDate', year: number, month?: number, date?: number): void;
|
||||
|
||||
/**
|
||||
* Moves the calendar to an arbitrary date.
|
||||
*/
|
||||
fullCalendar(method: 'gotoDate', date: Date | string): void;
|
||||
|
||||
/**
|
||||
* Moves the calendar forward/backward an arbitrary amount of time.
|
||||
*/
|
||||
fullCalendar(method: 'incrementDate', year: number, month?: number, date?: number): void;
|
||||
|
||||
/**
|
||||
* Returns a Date object for the current date of the calendar.
|
||||
*/
|
||||
fullCalendar(method: 'getDate'): Date;
|
||||
|
||||
/**
|
||||
* A method for programmatically selecting a period of time.
|
||||
*/
|
||||
fullCalendar(method: 'select', startDate: Date, endDate: Date, allDay: boolean): void;
|
||||
|
||||
/**
|
||||
* A method for programmatically clearing the current selection.
|
||||
*/
|
||||
fullCalendar(method: 'unselect'): void;
|
||||
|
||||
/**
|
||||
* Reports changes to an event and renders them on the calendar.
|
||||
*/
|
||||
fullCalendar(method: 'updateEvent', event: FullCalendar.EventObject): void;
|
||||
|
||||
/**
|
||||
* Retrieves events that FullCalendar has in memory.
|
||||
*/
|
||||
fullCalendar(method: 'clientEvents', idOrfilter?: any): FullCalendar.EventObject[];
|
||||
|
||||
/**
|
||||
* Retrieves events that FullCalendar has in memory.
|
||||
*/
|
||||
fullCalendar(method: 'clientEvents', idOrfilter?: (e: FullCalendar.EventObject) => boolean): FullCalendar.EventObject[];
|
||||
|
||||
/**
|
||||
* Removes events from the calendar.
|
||||
*/
|
||||
fullCalendar(method: 'removeEvents', idOrfilter?: any): void;
|
||||
|
||||
/**
|
||||
* Removes events from the calendar.
|
||||
*/
|
||||
fullCalendar(method: 'removeEvents', idOrfilter?: (e: FullCalendar.EventObject) => boolean): void;
|
||||
|
||||
/**
|
||||
* Refetches events from all sources and rerenders them on the screen.
|
||||
*/
|
||||
fullCalendar(method: 'refetchEvents'): void;
|
||||
|
||||
/**
|
||||
* Dynamically adds an event source.
|
||||
*/
|
||||
fullCalendar(method: 'addEventSource', source: any): void;
|
||||
|
||||
/**
|
||||
* Dynamically removes an event source.
|
||||
*/
|
||||
fullCalendar(method: 'removeEventSource', source: any): void;
|
||||
|
||||
/**
|
||||
* Renders a new event on the calendar.
|
||||
*/
|
||||
fullCalendar(method: 'renderEvent', event: FullCalendar.EventObject, stick?: boolean): void;
|
||||
|
||||
/**
|
||||
* Rerenders all events on the calendar.
|
||||
*/
|
||||
fullCalendar(method: 'rerenderEvents'): void;
|
||||
|
||||
/**
|
||||
* Create calendar object
|
||||
*/
|
||||
fullCalendar(options: FullCalendar.Options): JQuery;
|
||||
|
||||
/**
|
||||
* Generic method function
|
||||
*/
|
||||
fullCalendar(method: string, arg1: any, arg2: any, arg3: any): void;
|
||||
}
|
||||
|
||||
interface JQueryStatic {
|
||||
fullCalendar: FullCalendar.Calendar;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"moment": ">=2.14.0"
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": false,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../../",
|
||||
"typeRoots": [
|
||||
"../../"
|
||||
],
|
||||
"types": [],
|
||||
"paths": {
|
||||
"fullcalendar": [
|
||||
"fullcalendar/v1"
|
||||
]
|
||||
},
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"fullcalendar-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"ban-types": false,
|
||||
"unified-signatures": false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user