Fullcalendar - How to add time of the day in week view - javascript

Default weekview is like this one, no time of the day on left side:
http://fullcalendar.io/views/basicWeek/
but I'd like to make the view this way, with time of the day on left side:
http://fullcalendar.io/js/fullcalendar-2.3.1/demos/agenda-views.html
click 'week' on upper button panel to see it.
How do I configure it to make it looks like this way?
Thanks!

You want to use the defaultView property. This sets, as specified in the docs, the initial view when the calendar loads. The specific view you want is agendaWeek (list of available views).
So when you initialize your calendar, you'll put defaultView: 'agendaWeek'.
Example:
$('#fullCal').fullCalendar({
events: [{
title: 'Random Event 1',
start: moment().add(-4, 'h'),
end: moment().add(-2, 'h'),
allDay: false
}, {
title: 'Random Event 2',
start: moment().add(1, 'h'),
end: moment().add(2, 'h'),
allDay: false
}, {
title: 'Random Event 3',
start: moment().add(6, 'h'),
end: moment().add(8, 'h'),
allDay: false
}],
header: {
left: '',
center: 'prev title next today',
right: ''
},
timezone: 'local',
defaultView: 'agendaWeek' /* this is the line you need */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<div id="fullCal"></div>

Related

how to alert next month date

I'm using "fullcalendar" plug- https://fullcalendar.io/ in order to display tours on calendar
when user click next/pre button, how do i ALERT the next/pre full date?
for instant, if the calendar show me the current day (2019-06-03) and i click "next" then alert will display 2019-07-01. clicking "pre" will display 2019-05-01
my code:
<div id="calendar"></div>
<script>
$(document).ready(function() {
var initialLocaleCode = 'en';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
eventLimit: true,
editable: false,
events: [
{
title: 'tour 1',
start: '2019-05-05',
end: '2019-05-11',
className: 'bg-warning'
},{
title: 'title for tour num 2',
start: '2019-05-19',
end: '2019-05-25',
className: 'bg-purple'
},{
title: '3td tour title',
start: '2019-05-16',
end: '2019-05-21',
className: 'bg-info'
}
]
});
});
</script>
I'm not sure why you'd need to do this, since the new date will already be displayed at the top of your calendar.
However, putting that aside, one way to achieve it is to handle the viewRender event. This will occur anytime either the date range or the type of view is changed on the calendar, and fires just before the new view is actually displayed on the screen. As per the documentation, the view object supplied in the callback contains the the start and end dates which are about to be displayed.
You could write something like this:
viewRender: function( view, element )
{
alert(view.start.format("YYYY-MM-DD"));
}
Here's a working demonstration: http://jsfiddle.net/8bxqzfev/

How to scroll to current day after render calebdar?

I'm using fullcalendar.io.I want to scroll up to the current date after the render of the calendar on listMonth view.
calendar code:
if ($(window).width() < 768) {
columnFormat = 'ddd';
defaultView = 'listMonth';
left = 'prev,next';
right = 'month,listMonth';
} else {
columnFormat = 'dddd';
defaultView = 'month';
left = 'prev';
right = 'next';
}
$('#calendar').fullCalendar({
header: {
left: left,
center: 'title',
right: right
},
timeFormat: 'H:mm',
columnFormat: columnFormat,
defaultView: defaultView,
events: {
url: MyAjax.ajaxurl,
type: 'POST',
data: {
action: 'events_list',
security: MyAjax.security,
},
},
eventClick: function (event, jsEvent, view) {
if (event.url) {
window.open(event.url, "_blank");
return false;
}
},
});
Please help me to do it.
Example: https://jewlife.by/
Muhammad's answer is fine for most of FullCalendar's views, but alas the listMonth view does not support that approach for jumping to a particular day in the current month.
Instead, you need to programmatically scroll to the current day. Something like the following will work fine:
// Initialise the calendar
$("#calendar").fullCalendar({
eventAfterAllRender: function (view) {
if (view.name === "listMonth") {
var viewStartDate = $("#calendar").fullCalendar("getDate");
var target = $(".fc-listMonth-view .fc-list-heading[data-date=" + viewStartDate.format("YYYY-MM-DD") + "]");
if (target.length) {
$(".fc-listMonth-view .fc-scroller").scrollTop(target.position().top);
}
}
},
// Other initial settings here
});
Tested and working as of FullCalendar v3.9.0.
you should use goToDate() if you want to navigate to a date after the calendar has loaded, via the click of a button, it moves the calendar to an arbitrary date.
$('#calendar').fullCalendar( 'gotoDate', date )
Note: date can be a `Moment object or anything the Moment constructor accepts.
Or if you like the calendar to load on a specific date then you should use the defaultDate option while initializing the calendar.
You can learn more here
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2017-11-12',
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'Old Day Event',
start: '2014-05-01'
}, {
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-11',
end: '2017-11-13'
},
{
title: 'Meeting',
start: '2017-11-12T10:30:00',
end: '2017-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-11-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-11-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-11-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-11-28'
}
]
});
var local = $.fullCalendar.moment('2014-05-01T12:00:00');
calendar.fullCalendar('gotoDate', local);
});
#goto {}
<script src="https://fullcalendar.io/js/fullcalendar-3.7.0/lib/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.min.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.print.min.css" rel="stylesheet" />
<p>calendar is navigated to previous date November in 2014 after loading on 2017 by default </p>
<div id='calendar'></div>

Fullcalendar: display multi days event in allDay event?

I'm using fullcalendar version 3.6.2 with some events.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
nextDayThreshold: '00:00:00', // 9am
events: [
{
title: 'Tesst tesst',
allDay: false,
start: '2017-11-12T08:00:00',
end: '2017-11-13T15:00:00'
},
{
title: 'Birthday Party',
start: '2017-11-19T10:00:00',
end: '2017-11-21T06:00:00'
},
{
title: 'All Day Event',
allDay:true,
start: TOMORROW,
end: TOMORROW
},
{
title: 'Long Event',
start: '2017-11-07T10:00:00',
end: '2017-11-10T06:00:00'
},
{
title: 'Conference',
start: '2017-11-26T10:00:00',
end: '2017-11-28T04:00:00'
},
{
title: 'Meeting',
allDay: true,
start: TODAY + 'T10:30:00',
end: TODAY + 'T12:30:00'
},
]
});
My plunk: demo
I want to make long events display in all-day event in agendaWeek/agendaDay like Allday event.
Any way to do this?
Thanks so much!
Had a similar problem, try this:
The eventDataTransform Is key here, this allows you to manipulate the data before it’s rendered on to the calendar.
In my example, because others that create events on our calendar frequently create multi-day events that then take up most of the screen in agendaDay view, I opted to reclassify these events as all day events which relocates them to the top of the view.
I’ve chosen to reclassify any event >=5 hours as an all day event.
It’s important to catch eventData.end == null as well!
Multi day events will need to be identified further as to those which need the end date redefining to midnight the following morning. This is useful where for example as multi-day event finishes at 1500hrs on the last day this will also be moved to the top as an all day event. Without this amendment the last day will be cut off. There’s some more info on this here: FullCalendar - Event spanning all day are one day too short
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: false,
aspectRatio: 0.77,
eventDataTransform: function (eventData) {
var dur = eventData.end - eventData.start; //total event duration
if(dur >= 18000000 || eventData.end == null){ // 5 hours
eventData.allDay = true;
//eventData.end needs ammending to 00:00:00 of the next morning
if (dur > 86400000) {
var m = moment(eventData.end);
var roundDown = m.startOf('day');
var day2 = moment(roundDown).add(1, 'days')
eventData.end = day2.toString();
}
}
return(eventData);
},
});

Add more events to fullcalendar when dragging starts

I need to be able to let users move some events around on my fullcalendar. And I want to go to server and fetch counterparties' busy times and display them as background events on the calendar when the dragging is going on. However, when I call .fullcalendar('renderEvents', [...]) while the dragging is happening, the dragging mechanism within fullcalendar breaks and stops.
Is there a way to either add events without breaking dragging or some other way highlight busy times that have to be retrieved with ajax call?
The example is here: https://jsbin.com/qikiganelu/1/edit?js,output. Try dragging 'Meeting with Bob'.
$(function() { // document ready
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agenda',
duration: {days: 2},
allDaySlot: false,
defaultDate: '2017-04-27',
minTime: '9:00',
maxTime: '17:00',
events: [
{
title: 'Keynote',
start: '2017-04-27T09:00',
end: '2017-04-27T11:00',
editable: false,
color: "gray",
},
{
title: 'Meeting with Bob',
start: '2017-04-27T12:30',
end: '2017-04-27T13:00',
editable: true,
},
],
eventDragStart: function(event, jsEvent, ui, view){
// fetch Bob's busy times and add them as background events
var busyTimes = [
{
start: '2017-04-27T14:00',
end: '2017-04-27T16:00',
rendering: 'background',
},
{
start: '2017-04-28T9:00',
end: '2017-04-28T12:00',
rendering: 'background',
}
];
$('#calendar').fullCalendar('renderEvents', busyTimes);
},
});
});
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.css' rel='stylesheet' />
<link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.js'></script>
<!-- the code from the JavaScript tab will go here -->
<!-- the code from the CSS tab will go here -->
</head>
<body>
<div id='calendar'></div>
</body>
</html>
As a workaround, try preloading all the background events, but hiding them via CSS until the drag operation happens. For instance:
// hide all background events by default
.fc-bgevent {
display: none;
}
// redisplay once "show-background-events" class toggled on
.fc-bgevent.show-background-events {
display: block;
}
Show / hide the background events by toggling the .show-background-events class like so:
eventDragStart: function(event, jsEvent, ui, view){
$(".fc-bgevent").addClass("show-background-events");
},
eventDragStop: function(event, jsEvent, ui, view){
$(".fc-bgevent").removeClass("show-background-events");
}
Example at: https://jsbin.com/vuvacisibu/1/edit?css,js,output
My bad, I now see the problem. And your mistake is the place you put your $('#calendar').fullCalendar('renderEvents', busyTimes); and also the way you write the array, I also changed the ISO8601 time string a bit to be sure.
You can remove the seconds from the time string and write 2017-04-27T12:35Z instead of 2017-04-27T12:35:02Z for example
<script>
$(function() { // document ready
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agenda',
duration: {days: 2},
allDaySlot: false,
defaultDate: '2017-04-27',
minTime: '9:00',
maxTime: '17:00',
events: [
{
title: 'Keynote',
start: '2017-04-27T09:00',
end: '2017-04-27T10:00',
editable: false,
color: "gray",
},
{
title: 'Meeting with Bob',
start: '2017-04-27T10:35:02Z',
end: '2017-04-27T11:35:02Z',
editable: true,
},
],
eventDragStart: function(event, jsEvent, ui, view){
}
});
//this is the new place for the fetching and calling renderEvents
// fetch Bob's busy times and add them as background
var busyTimes = [
{title: 'Event One', start: '2017-04-27T12:35:02Z', end: '2017-04-27T13:35:02Z'},
{title: 'Event Two', start: '2017-04-27T14:35:02Z', end: '2017-04-27T15:35:02Z'}
];
$('#calendar').fullCalendar('renderEvents', busyTimes);
});
</script>

fullcalendar '+ more' link not displaying all events for the day as expected

I have 4 events on one day.
When I set eventLimit to 3 it displays '+2 more' as expected.
But when you click on '+2 more' it only displays the 2 events that are already visible when it should display all events for that day.
When I set eventLimit to 4 all 4 events display fine.
How can I get all 4 events to display when you click '+2 more'????
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.css' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.js'></script>
</head>
<body>
<div id="calendar">
</div>
<script>
$('#calendar').fullCalendar(
{editable: false,
firstday: 1,
eventLimit: 3,
eventTextColor: 'white',
events:[
{
title: 'Multi day event 1',
start: '2014-11-09',
end: '2014-11-16'
},
{
title: '1 Day event 1',
start: '2014-11-12',
end: '2014-11-12'
},
{
title: '1 Day Event 2',
start: '2014-11-12',
end: '2014-11-12'
},
{
title: '2 Day event',
start: '2014-11-12',
end: '2014-11-14'
}
]}
);
</script>
</body>
</html>
You have an issue with your events array, specifically with those that don't appear on the popover (1 Day event 1 and 1 Day Event 2).
By the description you have, I'm assuming these will be all day events. If this is the case, you should define the events in the following manner (remove the end option and add allDay: true):
{
title: '1 Day event 1',
allDay: true,
start: '2014-11-12'
},
{
title: '1 Day Event 2',
allDay: true,
start: '2014-11-12'
},
If the events aren't supposed to be all day, then you must define the time part, as such:
{
title: '1 Day event 1',
start: '2014-11-12T12:00:00',
end: '2014-11-12T16:00:00'
},
{
title: '1 Day Event 2',
start: '2014-11-12T18:00:00',
end: '2014-11-12T20:00:00'
},
Check this jsfiddle, where I've changed those events with the options I'm presenting here.

Categories