diff --git a/demos/agenda-views.html b/demos/agenda-views.html index 42aba00..abf8881 100644 --- a/demos/agenda-views.html +++ b/demos/agenda-views.html @@ -1,19 +1,16 @@ + + @@ -46,7 +48,7 @@ }, editable: true, droppable: true, // this allows things to be dropped onto the calendar !!! - drop: function(date, allDay) { // this function is called when something is dropped + drop: function(date) { // this function is called when something is dropped // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); @@ -56,7 +58,6 @@ // 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/) @@ -82,12 +83,12 @@ text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; - } + } #wrap { width: 1100px; margin: 0 auto; - } + } #external-events { float: left; @@ -96,13 +97,13 @@ border: 1px solid #ccc; background: #eee; text-align: left; - } + } #external-events h4 { font-size: 16px; margin-top: 0; padding-top: 1em; - } + } .external-event { /* try to mimick the look of a real event */ margin: 10px 0; @@ -111,44 +112,46 @@ color: #fff; font-size: .85em; cursor: pointer; - } + } #external-events p { margin: 1.5em 0; font-size: 11px; color: #666; - } + } #external-events p input { margin: 0; vertical-align: middle; - } + } #calendar { float: right; width: 900px; - } + } -
+
-
-

Draggable Events

-
My Event 1
-
My Event 2
-
My Event 3
-
My Event 4
-
My Event 5
-

- -

-
+
+

Draggable Events

+
My Event 1
+
My Event 2
+
My Event 3
+
My Event 4
+
My Event 5
+

+ + +

+
-
+
-
-
+
+ +
diff --git a/demos/gcal.html b/demos/gcal.html index b227f47..f651f48 100644 --- a/demos/gcal.html +++ b/demos/gcal.html @@ -1,10 +1,11 @@ + + - @@ -11,21 +13,22 @@ $(document).ready(function() { $('#calendar').fullCalendar({ - - editable: true, - - events: "json-events.php", - - eventDrop: function(event, delta) { - alert(event.title + ' was moved ' + delta + ' days\n' + - '(should probably update your database)'); + header: { + left: 'prev,next today', + center: 'title', + right: 'month,agendaWeek,agendaDay' + }, + defaultDate: '2014-01-12', + editable: true, + events: { + url: 'php/get-events.php', + error: function() { + $('#script-warning').show(); + } }, - loading: function(bool) { - if (bool) $('#loading').show(); - else $('#loading').hide(); + $('#loading').toggle(bool); } - }); }); @@ -34,28 +37,47 @@ - -
-

json-events.php needs to be running in the same directory.

+ +
+ php/get-events.php must be running. +
+ +
loading...
+ +
+ diff --git a/demos/json/events.json b/demos/json/events.json new file mode 100644 index 0000000..dd2ab42 --- /dev/null +++ b/demos/json/events.json @@ -0,0 +1,39 @@ +[ + { + "title": "All Day Event", + "start": "2014-01-01" + }, + { + "title": "Long Event", + "start": "2014-01-07", + "end": "2014-01-10" + }, + { + "id": "999", + "title": "Repeating Event", + "start": "2014-01-09T16:00:00-05:00" + }, + { + "id": "999", + "title": "Repeating Event", + "start": "2014-01-16T16:00:00-05:00" + }, + { + "title": "Meeting", + "start": "2014-01-12T10:30:00-05:00", + "end": "2014-01-12T12:30:00-05:00" + }, + { + "title": "Lunch", + "start": "2014-01-12T12:00:00-05:00" + }, + { + "title": "Birthday Party", + "start": "2014-01-13T07:00:00-05:00" + }, + { + "title": "Click for Google", + "url": "http://google.com/", + "start": "2014-01-28" + } +] \ No newline at end of file diff --git a/demos/languages.html b/demos/languages.html new file mode 100644 index 0000000..87bf448 --- /dev/null +++ b/demos/languages.html @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + +
+ + Language: + + +
+ +
+ + + diff --git a/demos/php/get-events.php b/demos/php/get-events.php new file mode 100644 index 0000000..2902278 --- /dev/null +++ b/demos/php/get-events.php @@ -0,0 +1,50 @@ +isWithinDayRange($range_start, $range_end)) { + $output_arrays[] = $event->toArray(); + } +} + +// Send JSON to the client. +echo json_encode($output_arrays); \ No newline at end of file diff --git a/demos/php/get-timezones.php b/demos/php/get-timezones.php new file mode 100644 index 0000000..afa0bfb --- /dev/null +++ b/demos/php/get-timezones.php @@ -0,0 +1,9 @@ +values. + // You can optionally force the timezone of the parsed dates. + public function __construct($array, $timezone=null) { + + $this->title = $array['title']; + + if (isset($array['allDay'])) { + // allDay has been explicitly specified + $this->allDay = (bool)$array['allDay']; + } + else { + // Guess allDay based off of ISO8601 date strings + $this->allDay = preg_match(self::ALL_DAY_REGEX, $array['start']) && + (!isset($array['end']) || preg_match(self::ALL_DAY_REGEX, $array['end'])); + } + + if ($this->allDay) { + // If dates are allDay, we want to parse them in UTC to avoid DST issues. + $timezone = null; + } + + // Parse dates + $this->start = parseDateTime($array['start'], $timezone); + $this->end = isset($array['end']) ? parseDateTime($array['end'], $timezone) : null; + + // Record misc properties + foreach ($array as $name => $value) { + if (!in_array($name, array('title', 'allDay', 'start', 'end'))) { + $this->properties[$name] = $value; + } + } + } + + + // Returns whether the date range of our event intersects with the given all-day range. + // $rangeStart and $rangeEnd are assumed to be dates in UTC with 00:00:00 time. + public function isWithinDayRange($rangeStart, $rangeEnd) { + + // Normalize our event's dates for comparison with the all-day range. + $eventStart = stripTime($this->start); + $eventEnd = isset($this->end) ? stripTime($this->end) : null; + + if (!$eventEnd) { + // No end time? Only check if the start is within range. + return $eventStart < $rangeEnd && $eventStart >= $rangeStart; + } + else { + // Check if the two ranges intersect. + return $eventStart < $rangeEnd && $eventEnd > $rangeStart; + } + } + + + // Converts this Event object back to a plain data array, to be used for generating JSON + public function toArray() { + + // Start with the misc properties (don't worry, PHP won't affect the original array) + $array = $this->properties; + + $array['title'] = $this->title; + + // Figure out the date format. This essentially encodes allDay into the date string. + if ($this->allDay) { + $format = 'Y-m-d'; // output like "2013-12-29" + } + else { + $format = 'c'; // full ISO8601 output, like "2013-12-29T09:00:00+08:00" + } + + // Serialize dates into strings + $array['start'] = $this->start->format($format); + if (isset($this->end)) { + $array['end'] = $this->end->format($format); + } + + return $array; + } + +} + + +// Date Utilities +//---------------------------------------------------------------------------------------------- + + +// Parses a string into a DateTime object, optionally forced into the given timezone. +function parseDateTime($string, $timezone=null) { + $date = new DateTime( + $string, + $timezone ?: new DateTimeZone('UTC') + // Used only when the string is ambiguous. + // Ignored if string has a timezone offset in it. + ); + if ($timezone) { + // If our timezone was ignore above, force it. + $date->setTimezone($timezone); + } + return $date; +} + + +// Takes the year/month/date values of the given DateTime and converts them to a new DateTime, +// but in UTC. +function stripTime($datetime) { + return new DateTime($datetime->format('Y-m-d')); +} diff --git a/demos/selectable.html b/demos/selectable.html index 0823d7a..62d9e8f 100644 --- a/demos/selectable.html +++ b/demos/selectable.html @@ -1,88 +1,77 @@ + + + + + + + + + + +
+ +
+ Timezone: + +
+ +
+ loading... + php/get-events.php must be running. +
+ +
+ +
+ +
+ + + \ No newline at end of file