142 lines
4.8 KiB
JavaScript
142 lines
4.8 KiB
JavaScript
!(function ($) {
|
|
"use strict";
|
|
|
|
var CalendarApp = function () {
|
|
this.$body = $("body");
|
|
(this.$calendar = $("#calendar")),
|
|
(this.$event = "#calendar-events div.calendar-events"),
|
|
(this.$categoryForm = $("#add-new-event form")),
|
|
(this.$extEvents = $("#calendar-events")),
|
|
(this.$modal = $("#my-event")),
|
|
(this.$saveCategoryBtn = $(".save-category")),
|
|
(this.$calendarObj = null);
|
|
};
|
|
|
|
/* on drop */
|
|
(CalendarApp.prototype.onDrop = function (eventObj, date) {
|
|
var $this = this;
|
|
// retrieve the dropped element's stored Event Object
|
|
var originalEventObject = eventObj.data("eventObject");
|
|
var $categoryClass = eventObj.attr("data-class");
|
|
// we need to copy it, so that multiple events don't have a reference to the same object
|
|
var copiedEventObject = $.extend({}, originalEventObject);
|
|
// assign it the date that was reported
|
|
copiedEventObject.start = date;
|
|
if ($categoryClass) copiedEventObject["className"] = [$categoryClass];
|
|
// render the event on the calendar
|
|
$this.$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
|
|
eventObj.remove();
|
|
}
|
|
}),
|
|
/* on click on event */
|
|
(CalendarApp.prototype.onEventClick = function (calEvent, jsEvent, view) {
|
|
var $this = this;
|
|
var form = $("<form></form>");
|
|
form.append("<label>Change event name</label>");
|
|
form.append(
|
|
"<div class='input-group'><input class='form-control' type=text value='" +
|
|
calEvent.title +
|
|
"' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>"
|
|
);
|
|
$this.$modal.modal({
|
|
backdrop: "static",
|
|
});
|
|
$this.$modal
|
|
.find(".delete-event")
|
|
.show()
|
|
.end()
|
|
.find(".save-event")
|
|
.hide()
|
|
.end()
|
|
.find(".modal-body")
|
|
.empty()
|
|
.prepend(form)
|
|
.end()
|
|
.find(".delete-event")
|
|
.unbind("click")
|
|
.click(function () {
|
|
$this.$calendarObj.fullCalendar("removeEvents", function (ev) {
|
|
return ev._id == calEvent._id;
|
|
});
|
|
$this.$modal.modal("hide");
|
|
});
|
|
$this.$modal.find("form").on("submit", function () {
|
|
calEvent.title = form.find("input[type=text]").val();
|
|
$this.$calendarObj.fullCalendar("updateEvent", calEvent);
|
|
$this.$modal.modal("hide");
|
|
return false;
|
|
});
|
|
}),
|
|
(CalendarApp.prototype.enableDrag = function () {
|
|
//init events
|
|
$(this.$event).each(function () {
|
|
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
|
|
// it doesn't need to have a start or end
|
|
var 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
|
|
});
|
|
});
|
|
});
|
|
/* Initializing */
|
|
(CalendarApp.prototype.init = function () {
|
|
this.enableDrag();
|
|
/* Initialize the calendar */
|
|
var date = new Date();
|
|
var d = date.getDate();
|
|
var m = date.getMonth();
|
|
var y = date.getFullYear();
|
|
var form = "";
|
|
var today = new Date($.now());
|
|
|
|
var defaultEvents = [];
|
|
|
|
var $this = this;
|
|
$this.$calendarObj = $this.$calendar.fullCalendar({
|
|
slotDuration: "00:15:00",
|
|
/* If we want to split day time each 15minutes */
|
|
minTime: "08:00:00",
|
|
maxTime: "19:00:00",
|
|
defaultView: "month",
|
|
handleWindowResize: true,
|
|
|
|
header: {
|
|
left: "prev,next today",
|
|
center: "title",
|
|
right: "month,agendaWeek,agendaDay",
|
|
},
|
|
events: defaultEvents,
|
|
editable: true,
|
|
droppable: true, // this allows things to be dropped onto the calendar !!!
|
|
eventLimit: true, // allow "more" link when too many events
|
|
selectable: true,
|
|
drop: function (date) {
|
|
$this.onDrop($(this), date);
|
|
},
|
|
select: function (start, end, allDay) {
|
|
$this.onSelect(start, end, allDay);
|
|
},
|
|
eventClick: function (calEvent, jsEvent, view) {
|
|
$this.onEventClick(calEvent, jsEvent, view);
|
|
},
|
|
});
|
|
}),
|
|
//init CalendarApp
|
|
($.CalendarApp = new CalendarApp()),
|
|
($.CalendarApp.Constructor = CalendarApp);
|
|
})(window.jQuery),
|
|
//initializing CalendarApp
|
|
$(window).on("load", function () {
|
|
$.CalendarApp.init();
|
|
});
|