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.
296 lines
9.9 KiB
296 lines
9.9 KiB
!(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.show(); |
|
$(".bckdrop").addClass("show"); |
|
$(".bckdrop").removeClass("hide"); |
|
$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.hide("hide"); |
|
$(".bckdrop").addClass("hide"); |
|
$(".bckdrop").removeClass("show"); |
|
}); |
|
$this.$modal.find("form").on("submit", function () { |
|
calEvent.title = form.find("input[type=text]").val(); |
|
$this.$calendarObj.fullCalendar("updateEvent", calEvent); |
|
$this.$modal.hide("hide"); |
|
$(".bckdrop").addClass("hide"); |
|
$(".bckdrop").removeClass("show"); |
|
return false; |
|
}); |
|
}), |
|
/* on select */ |
|
(CalendarApp.prototype.onSelect = function (start, end, allDay) { |
|
var $this = this; |
|
$this.$modal.show(); |
|
$(".bckdrop").addClass("show"); |
|
$(".bckdrop").removeClass("hide"); |
|
var form = $("<form></form>"); |
|
form.append("<div class='row'></div>"); |
|
form |
|
.find(".row") |
|
.append( |
|
"<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>" |
|
) |
|
.append( |
|
"<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-select' name='category'></select></div></div>" |
|
) |
|
.find("select[name='category']") |
|
.append("<option value='bg-danger'>Danger</option>") |
|
.append("<option value='bg-success'>Success</option>") |
|
.append("<option value='bg-primary'>Primary</option>") |
|
.append("<option value='bg-info'>Info</option>") |
|
.append("<option value='bg-warning'>Warning</option></div></div>"); |
|
$this.$modal |
|
.find(".delete-event") |
|
.hide() |
|
.end() |
|
.find(".save-event") |
|
.show() |
|
.end() |
|
.find(".modal-body") |
|
.empty() |
|
.prepend(form) |
|
.end() |
|
.find(".save-event") |
|
.unbind("click") |
|
.click(function () { |
|
form.submit(); |
|
$(".bckdrop").addClass("hide"); |
|
$(".bckdrop").removeClass("show"); |
|
$("body").removeClass("modal-open"); |
|
}); |
|
// $this.$modal.find(".close-dialog").click(function () { |
|
// $this.$modal.hide("hide"); |
|
// $(".bckdrop").addClass("hide"); |
|
// $(".bckdrop").removeClass("show"); |
|
// $("body").removeClass("modal-open"); |
|
// }); |
|
$this.$modal.find(".close-dialog").click(function () { |
|
$this.$modal.hide("hide"); |
|
$(".bckdrop").addClass("hide"); |
|
$(".bckdrop").removeClass("show"); |
|
$this.$modal.hide(); |
|
// $("body").removeClass("modal-open"); |
|
}); |
|
$("body").addClass("modal-open"); |
|
$this.$modal.find("form").on("submit", function () { |
|
var title = form.find("input[name='title']").val(); |
|
var beginning = form.find("input[name='beginning']").val(); |
|
var ending = form.find("input[name='ending']").val(); |
|
var categoryClass = form |
|
.find("select[name='category'] option:checked") |
|
.val(); |
|
if (title !== null && title.length != 0) { |
|
$this.$calendarObj.fullCalendar( |
|
"renderEvent", |
|
{ |
|
title: title, |
|
start: start, |
|
end: end, |
|
allDay: false, |
|
className: categoryClass, |
|
}, |
|
true |
|
); |
|
$this.$modal.hide("hide"); |
|
$(".bckdrop").addClass("hide"); |
|
$(".bckdrop").removeClass("show"); |
|
} else { |
|
alert("You have to give a title to your event"); |
|
} |
|
return false; |
|
}); |
|
$this.$calendarObj.fullCalendar("unselect"); |
|
}), |
|
(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 = [ |
|
{ |
|
title: "Meeting #3", |
|
start: new Date($.now() + 506800000), |
|
className: "bg-info", |
|
}, |
|
{ |
|
title: "Submission #1", |
|
start: today, |
|
end: today, |
|
className: "bg-danger", |
|
}, |
|
{ |
|
title: "Meetup #6", |
|
start: new Date($.now() + 848000000), |
|
className: "bg-info", |
|
}, |
|
{ |
|
title: "Seminar #4", |
|
start: new Date($.now() - 1099000000), |
|
end: new Date($.now() - 919000000), |
|
className: "bg-warning", |
|
}, |
|
{ |
|
title: "Event Conf.", |
|
start: new Date($.now() - 1199000000), |
|
end: new Date($.now() - 1199000000), |
|
className: "bg-purple", |
|
}, |
|
{ |
|
title: "Meeting #5", |
|
start: new Date($.now() - 399000000), |
|
end: new Date($.now() - 219000000), |
|
className: "bg-info", |
|
}, |
|
{ |
|
title: "Submission #2", |
|
start: new Date($.now() + 868000000), |
|
className: "bg-danger", |
|
}, |
|
{ |
|
title: "Seminar #5", |
|
start: new Date($.now() + 348000000), |
|
className: "bg-success", |
|
}, |
|
]; |
|
|
|
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); |
|
}, |
|
}); |
|
|
|
//on new event |
|
this.$saveCategoryBtn.on("click", function () { |
|
var categoryName = $this.$categoryForm |
|
.find("input[name='category-name']") |
|
.val(); |
|
var categoryColor = $this.$categoryForm |
|
.find("select[name='category-color']") |
|
.val(); |
|
if (categoryName !== null && categoryName.length != 0) { |
|
$this.$extEvents.append( |
|
'<div class="calendar-events mb-3" data-class="bg-' + |
|
categoryColor + |
|
'" style="position: relative;"><i class="fa fa-circle text-' + |
|
categoryColor + |
|
' me-2" ></i>' + |
|
categoryName + |
|
"</div>" |
|
); |
|
$this.enableDrag(); |
|
} |
|
}); |
|
}), |
|
//init CalendarApp |
|
($.CalendarApp = new CalendarApp()), |
|
($.CalendarApp.Constructor = CalendarApp); |
|
})(window.jQuery), |
|
//initializing CalendarApp |
|
$(window).on("load", function () { |
|
$.CalendarApp.init(); |
|
});
|
|
|