Modifying fullcalendar api by diving the day view into 6 parts - fullcalendar

I am using this fullcalendar.min.js and I want to modify the day part wherein I want to divide it into 6 parts (similar to the week view). And I want to have titles into these 6 parts (Rooms 1-6). Basically, what I am trying to do is to separate the contents in the calendar into 6 parts depending on the room number that they have. So basically the result that I want to get is when I click the day, it is divided into 6 parts (instead of 1). And it has titles room 1, room 2, ... room6, and the contents under these rooms is depending of the value of the title: "<%=c.getTitle()%>" if it contains a string of Room 1. I am new to fullcalendar so I'm wondering if this is possible.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: false,
droppable: true,
drop: function(date, allDay) {
var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
if($('#drop-remove').is(':checked')) {
$(this).remove();
}
},
events: [
<%
for(CalendarDTO c: list) {
%>
{
title: "<%=c.getTitle()%>",
start: "<%=c.getStart()%>",
color: "<%=c.getColor()%>"
},
<%}%>
]
});

Related

Full Calendar v3 extending display beyond end of calendar year in List View

Good morning!
I have a list view set up in full calendar and have noticed that it will not display events beyond the end of the year. With it being now mid-December, this is a bit of a problem for me. We have several event that should be displaying in this list. When I change the view to month I have to click the next month button to get next years events, but at least with that I do sucessfully see the events in question.
Is there a way for my list view calendars to roll-over and include next year entries as I approach the end of the current year?
Here is an excerpt of what I have that effects the display of my calendar:
{url:'https://calendar.mydomain.com/services/id/38djsuw3hr-au8reh39dq/organization/1/department/13/',event_properties:{color:'#6a9b49'}},
]
function data_req (url, callback) {
req = new XMLHttpRequest()
req.addEventListener('load', callback)
req.open('GET', url)
req.send()
}
function add_recur_events() {
if (sources_to_load_cnt < 1) {
$('#calendar').fullCalendar('addEventSource', expand_recur_events)
} else {
setTimeout(add_recur_events, 30)
}
}
function load_ics(ics){
data_req(ics.url, function(){
$('#calendar').fullCalendar('addEventSource', fc_events(this.response, ics.event_properties))
sources_to_load_cnt -= 1
})
}
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: '' //view options on top-right (supported by v2.9.1 currently)
},
viewDisplay: function(view) {
parent.setIframeHeight(iframeId) ;
},
eventClick: function(event) {
// opens events in a new window or tab
window.open(event.url,);
return false;
},
// eventDataTransform: function(rawEventData){
// return {title: rawEventData.Title
// };
// },
defaultView: $(window).width() < 765 ? 'listYear':'listYear', //carryover code from full sized calendar
nowIndicator: false, //show a marker for current time
eventLimit: 4, // allow "more" link when too many events
fixedWeekCount: false, // have blank rows on a 6 or 7 row month
listDayFormat: 'MMMM Do',
listDayAltFormat: false,
allDayDefault: false,
noEventsMessage: "No Currently Scheduled Events"
})
sources_to_load_cnt = ics_sources.length
for (ics of ics_sources) {
load_ics(ics)
}
add_recur_events()
})
All I see is my "NoEventsMessage" text when in list view. If I create a test event the occurs prior to the end of the year it shows up in list view.
Any ideas on spanning calendar end?
thanks
[Edit: I should say that the link at the top is a JSON feed, so I am not using a prefilled list of events from within my script or from within an external file]
Here is how I solved it.
I created a custom view entry for the specific default view called "list" and gave it a one year duration:
views: {
list: {
duration: { days:365 }
}
},
I reset my default view from the dynamic version I carried over from my full-sized calendar (since I am using this in a column anyway and the window width call is not needed):
From:
defaultView: $(window).width() < 765 ? 'listYear':'listYear',
To:
defaultView: 'list',
After doing those things my January entries for next year began to display in list view.
Here is what my display calls look like (If someone wants to edit this to make it look prettier and more efficient, I don't mind :).
ics_sources = [
{url:'https://calendar.mydomain.com/services/id/38djsuw3hr-au8reh39dq/organization/1/department/13/',event_properties:{color:'#6a9b49'}},
]
function data_req (url, callback) {
req = new XMLHttpRequest()
req.addEventListener('load', callback)
req.open('GET', url)
req.send()
}
function add_recur_events() {
if (sources_to_load_cnt < 1) {
$('#calendar').fullCalendar('addEventSource', expand_recur_events)
} else {
setTimeout(add_recur_events, 30)
}
}
function load_ics(ics){
data_req(ics.url, function(){
$('#calendar').fullCalendar('addEventSource', fc_events(this.response, ics.event_properties))
sources_to_load_cnt -= 1
})
}
$(document).ready(function() {
$('#calendar').fullCalendar({
header: false,
viewDisplay: function(view) {
parent.setIframeHeight(iframeId) ;
},
eventClick: function(event) {
// opens events in a new window or tab
window.open(event.url,);
return false;
},
defaultView: 'list',
nowIndicator: false, //show a marker for current time
eventLimit: 4, // allow "more" link when too many events
fixedWeekCount: false, // have blank rows on a 6 or 7 row month
listDayFormat: 'MMMM Do',
listDayAltFormat: false,
noEventsMessage: "No Currently Scheduled Events",
views: {
list: {
duration: { days: 365 },
}
}
})
sources_to_load_cnt = ics_sources.length
for (ics of ics_sources) {
load_ics(ics)
}
add_recur_events()
})
Thanks.
[edit: removed extraneous backticks from answer.]

Order Events in Fullcalendar by Start date and End Date

How can I order events in fullCalendar first by start date?
Example:
An event which starts first will show on top and then one which starts later will be later
If two events have same the start date then, order them by end date
i.e
an event which ends earlier will be shown first, followed by an event which ends later.
Calendar Display
Events Order
var args = jQuery.parseJSON(emCalendarArgs);
var Jobj = args.events;
// Setup FullCalendar
(function() {
//var language = jQuery('#pg_lang').val();
//alert(language+ 'dsfsd');
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var language = langg;
var mn_text, week_text, day_text, list_text;
//alert(mn_text);
var args = jQuery.parseJSON(emCalendarArgs);
var Jobj = args.events;
console.log(Jobj);
jQuery('#events-full-calendar').fullCalendar({
allDaySlot: false,
editable: true,
lang: 'he',
handleWindowResize: true,
eventOrder: 'start,end',
header: {
left: 'today prev,next',
center: 'title',
right: 'month,basicWeek,basicDay'
},
buttonText: {
month: mn_text,
week: week_text,
day: day_text
},
eventLimit: {
'month': 3, // adjust to 4 only for months
'default': false // display all events for other views
},
axisFormat: 'HH:mm',
timeFormat: {
agenda: 'H:mm{ - h:mm}'
},
slotEventOverlap: false,
events: Jobj,
timeFormat: 'H:mm',
});
}());
I found a Solution to it. For any one else looking for the solution to this, I changed a function in fullcalendar.js:
compareSegs: function(seg1, seg2) { return seg1.eventStartMS - seg2.eventStartMS || // earlier events go first seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go first seg2.event.allDay - seg1.event.allDay || // tie? put all-day events first (booleans cast to 0/1) compareByFieldSpecs(seg1.event, seg2.event, this.view.eventOrderSpecs); }
to :
compareSegs: function(seg1, seg2) {
if(this.view.name=="basicWeek" || this.view.name=="month" || this.view.name=="basicDay"){ // ordering events by color in ListView
return seg2.event.allDay - seg1.event.allDay || // tie? put all-day events first (booleans cast to 0/1)
compareByFieldSpecs(seg1.event, seg2.event, this.view.eventOrderSpecs);
}
else{
return seg1.eventStartMS - seg2.eventStartMS || // earlier events go first
seg2.eventDurationMS - seg1.eventDurationMS || // tie? longer events go first
seg2.event.allDay - seg1.event.allDay || // tie? put all-day events first (booleans cast to 0/1)
compareByFieldSpecs(seg1.event, seg2.event, this.view.eventOrderSpecs);
}
}
and used below code in fullcalendar function
eventOrder: 'start, end'
in my fullcalendar call

prevent an external event to be dropped on full calendar if earlier than today's date

I am using the fullcalendar jquery plugin to create a schedule of events. I want to prevent the user from dropping an external event on the calendar if it is earlier than current date.
This is my current code:
$('#edit_calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {
//compare today's date with drop date - if in the past, don't allow
var today = moment().startOf('day');
var dropDate = moment(date).startOf('day');
if (dropDate < today)
{
//The alert is shown
alert("An event in the past cannot be added, updated, or deleted.");
return false;
}
else
{
var memberName = $(this).data('event').title;
var memberID = $(this).attr('id').toString();
//Create Event - add to array
var newEvent = new Object();
newEvent = {
title: memberName,
id: memberID,
start: date.format(),
end: date.format(),
objectID: 0
};
eventsAdded.push(newEvent);
}
},
...rest of code
If the event is dropped before the current day display the alert and do not create the event. If shown after the current day, create the event.
In the code above, the alert is shown, but the event is still created. If the event is dropped after the current day, the event is created.
I thought by adding return false after the alert is displayed it will prevent the event from being created. However, the alert is shown AND the event is created.
Do I have to remove the event or is there a way to prevent the event from being created?
I was able to restrict events when they are added or changed using the selectConstraint and eventConstraint respectively. However, I would like to add an alert when the user tries to update or add an event outside the start and end dates so they know why it is not working.
This is what I have:
$('#edit_calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {
var memberName = $(this).data('event').title;
var memberID = $(this).attr('id').toString();
//Create Event - add to array
var newEvent = new Object();
newEvent = {
title: memberName,
id: memberID,
start: date.format(),
end: date.format(),
objectID: 0
};
eventsAdded.push(newEvent);
},
editable: true,
//The following constraints prevents the user from adding/updating/deleting events that are before the current date
//The end date is required. So, you can't add events over a year away from the current date
eventConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
selectConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
...rest of code...
Is there any way I can add an alert when the user tries to add or update an event ou
From the documentation:
eventDrop does not get called when an external event lands on the calendar. eventReceive is called instead
Having said that, in order to prevent the drop you need to go more back in the chain. You need to use "dropAccept". You can read about it in the documentation.
You can use 'removeEvents' to remove added event.
https://fullcalendar.io/docs1/event_data/removeEvents/
drop: function(date, jsEvent, ui, resourceId) {
var add = true;
... // Here decide whether to add or not
if(add){
;
}
else{
//use 'removeEvents' to remove added event
}
}

How to get the date when calendar rendering date cells

I've a situation where I need to get the date to attach in each event url (For event url's I'm adding the href attr using jquery) query string but after checking the docs I found both eventClick and eventRender do not returns the date of cell upon which event is showing.
I tried google for it and found tricky solutions using the eventClick callback and use page X and Y and then get the nearest element which holds the data attribute with date for the particular cell date but
eventClick:function(event,jsEvent,view){
var clickedDate = $.nearest({x: jsEvent.pageX, y: jsEvent.pageY}, '.fc-day').attr('data-date');
alert(clickedDate);
}
But this solutions fails when I've multiple event on the same date cell and more events will be shown in a popup.
Note : $.nearest is the jquery plugin to find the nearest element from given X,Y postions
Note : I'm using v2
Does this work sufficiently well for you?
http://jsfiddle.net/3E8nk/531/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-06-12',
editable: true,
eventRender: function(event, element, view) {
var start = event.start.clone().startOf('day');
var end = event.end ? event.end.clone().endOf('day') : start.clone().endOf('day');
//Known bug: We get all "touching" events and not just necessarily events on the day we clicked
var events = $('#calendar').fullCalendar('clientEvents');
var touchingEvents = events.filter(function(event) {
var
eventStartWithin = event.start.isWithin(start, end),
eventEndWithin = event.end ? event.end.isWithin(start, end) : false;
return eventStartWithin || eventEndWithin;
});
console.log(touchingEvents);
},
events: [
{
title: 'All Day Event',
start: '2014-06-01'
},
{
title: 'Long Event',
start: '2014-06-07',
end: '2014-06-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-06-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-06-16T16:00:00'
},
{
title: 'Meeting',
start: '2014-06-12T10:30:00',
end: '2014-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2014-06-12T12:00:00'
},
{
title: 'Birthday Party',
start: '2014-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-06-28'
}
]
});

FullCalendar: How to show full day names in month view instead of default dayNamesShort?

The default month view display of FullCalendar shows the short version of day names.
I have been trying to find out how to change the display to show full day names. I have read the documentation about dayNames and dayNamesShort, but I can't get it to work.
Any help in how to display the full day names will be appreciated.
Thanks.
Here's how to do it. The magic is done via columnFormat option.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
timeFormat: {
// for agendaWeek and agendaDay do not display time in title (time already displayed in the view)
agenda: '',
// for all other views (19p)
'': 'H:mm{ - H:mm}'
},
// *** use long day names by using 'dddd' ***
columnFormat: {
month: 'dddd', // Monday, Wednesday, etc
week: 'dddd, MMM dS', // Monday 9/7
day: 'dddd, MMM dS' // Monday 9/7
},
axisFormat: 'H:mm',
firstHour: 6
});
});
I was able to modify the names by doing the following
$(document).ready(function() {
$('#calendar').fullCalendar({
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
});
});
Change the month view display to show full day names by setting:
columnFormat: {
month: 'dddd'
}
Richard's answer is good, but won't work with locales. So I tried all of the above but no one worked for me, only this:
columnHeaderText: function(mom) {
return mom.format('dddd');
}
Here are the docs.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'dayGridMonth',
events: 'https://fullcalendar.io/api/demo-feeds/events.json',
editable: true,
selectable: true,
showNonCurrentDates:false,
fixedWeekCount:false,
views: {
dayGridMonth: {
dayHeaderFormat: {
weekday: 'long'
}
}
}
});
calendar.render();
});
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

Resources