Using http://fullcalendar.io/
Is it possible to show 7 or more weeks in the full month view?
Anyone have an example?
You could make a customized view. Fullcalendar v2.4.0 demo https://jsfiddle.net/ktLxrw0v/
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'basicWeek, month, nineWeek'
},
views: {
nineWeek: {
type: 'basicWeek',
duration: {
weeks: 9
},
buttonText: 'Nine Week'
}
}
});
Related
https://fullcalendar.io
I have a need to render a background event when mousing over calendar events. Each calendar event has a datetime range associated with it that I would like to display on the calendar when the user hovers the mouse over it (and subsequently remove the background event from the calendar on eventMouseout). However, I've ran into an issue where the eventMouseover and eventMouseout events are triggered multiple times over and over when attempting to modify the fullCalendar on mouse enter/leave. I imagine this has something to do with the calendar being re-rendered when any of its events are touched adding/removing events to the calendar.
If you take a look at this codepen, open up DevTools and watch the console as you move your mouse over/out of any of the calendar events. If you move your mouse back and forth within an event you'll see the over/out events firing back to back, over and over.
What I'd like to have happen is a backgroundEvent (such as the following) to be updated with the datetime range on any given event. Then on mouseout, remove the backgroundEvent from the calendar.
// I'm only here because StackOverflow requires code to be present when a codepen link is shared.
var bgEvent = {
id: -1,
start: null,
end: null,
rendering: 'background',
backgroundColor: 'orange'
};
Instead what happens is the eventMouseover fires, renders the event, followed by the eventMouseout, which immediately removes the event.
EDIT 1:
I'm in the middle of creating a scheduling app, and the calendar events essentially represent individual tasks belonging to a greater "appointment" object. Thus, when hovering over an individual "task" I desire to display its associated "appointment" range on the calendar to assist the user in deciding whether that task can be moved to a different date/time or not.
EDIT 2:
Submitted an issue on FullCalendar's github repo. Will update with any developments from there.
CODE FROM THE ABOVE CODEPEN
HTML
<div id="calendar"></div>
CSS
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
JAVASCRIPT
$(function() {
var calendar = $('#calendar');
var bgEvent = {
id: -1,
start: null,
end: null,
rendering: 'background',
backgroundColor: 'orange'
};
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
eventMouseover: function (event, jsEvent, view) {
console.log('in');
bgEvent.start = event.start;
bgEvent.end = event.end;
var events = calendar.fullCalendar('clientEvents', bgEvent.id);
if (events.length) {
var e = events[0];
calendar.fullCalendar('updateEvent', e);
}
else
calendar.fullCalendar('renderEvent', bgEvent);
},
eventMouseout: function (event, jsEvent, view) {
console.log('out');
calendar.fullCalendar('removeEvents', bgEvent.id);
},
defaultDate: '2017-11-06',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-11-01'
},
{
title: 'Long Event',
start: '2017-11-07',
end: '2017-11-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-16T16:00:00'
},
{
title: 'Conference',
start: '2017-11-05',
end: '2017-11-07'
},
{
title: 'Meeting',
start: '2017-11-06T10:30:00',
end: '2017-11-06T12:30:00'
},
{
title: 'Lunch',
start: '2017-11-06T12:00:00'
},
{
title: 'Meeting',
start: '2017-11-06T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-11-06T17:30:00'
},
{
title: 'Dinner',
start: '2017-11-06T20:00:00'
},
{
title: 'Movie',
start: '2017-11-07T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-11-28'
}
]
});
});
Adam Shaw from the FullCalendar project comments that "whenever any events are rendered or rerendered, ALL events are rerendered. What you are seeing is a flash rerender of the foreground event causing a real mouseout. When #3003's optimization is made, this will be fixed."
Some of my Fullcalendar events have links. The links point to either public webpages, pdf documents or webpages which are restricted access.
I would like to add a class to format the links to add an icon, based on url string.
If the url contains:
"pdf" addclass "fc-pdf"
"restricted" addclass "fc-lock"
I assume it should be with and eventRender... but I'm having trouble find the right syntax. Can someone help me with this?
http://jsfiddle.net/lbriquet/oez9Ltym/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month'
},
views: {
listDay: {
buttonText: 'list day'
},
listWeek: {
buttonText: 'list week'
}
},
defaultView: 'listDay',
defaultDate: '2016-09-12',
navLinks: true, // can click day/week names to navigate views
events: [{
title: 'Conference (website)',
start: '2016-09-11',
end: '2016-09-13',
url: "https://www.ted.com/talks"
}, {
title: 'Meeting (download document)',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00',
url: "http://storage.ted.com/tedx/manuals/tedx_speaker_guide.pdf"
}, {
title: 'Lunch',
start: '2016-09-12T12:00:00'
}, {
title: 'Meeting (members only)',
start: '2016-09-12T14:30:00',
url: "http://www.dictionary.com/browse/restricted"
}, {
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
}, {
title: 'Dinner',
start: '2016-09-12T20:00:00'
}],
eventRender: function eventRender(event, element, view) {
}
});
The way I got this to work was by adding a type to the events simply because I think it would be easier than dealing with regex that might not always work. So events don't need a type but they can have a type pdf, restricted or whatever else you need. In eventRender I added the following:
eventRender: function eventRender(event, element, view) {
if(typeof event.type !== 'undefined') {
if(event.type === 'pdf') {
element.addClass('fc-pdf');
} else if(event.type === 'restricted') {
element.addClass('fc-lock');
}
}
}
A check to see if the type is provided or not and then if statements for adding the class based on the type. I also had to make a small change to the css selector, changing a.fc-lock to .fc-lock a to allow it to display properly. Here is the JS Fiddle showing this.
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()%>"
},
<%}%>
]
});
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'
}
]
});
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>