In calendar, dates are fetched from the database and displayed onto the calendar as follows:
var events_array = [
{
title: 'Test1',
start: new Date(2014, 8, 1),
end: new Date(2014, 8, 3),
allDay: false},
{
title: 'Test2',
start: new Date(2014, 9, 2),
allDay: true}
];
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: events_array
})
});
My question is how can I add the event timing when fetched from the database? is there something like new Time for example as to avoid conflict when having multiple events per day?
thank you in advance.
how can I add the event timing when fetched from the database?
What do you mean by 'event timing' ?
is there something like new Time for example as to avoid conflict when having multiple events per day?
You can have multiple events in the same day with the same hour, time, duration, etc, as long as their id's are different or null, they are treated as individual events, so there should not be any conflicts regarding dates.
I meant to display the timing of each one in the day. For example, 1:00 pm event, 4:30 event...etc.
I have figured out how this can be done as follows:
eventsArray.push({title: "{{$e->event_name}}",
start: new Date(start.substring(0,4),start.substring(5,7)-1, start.substring(8,10),
startTime.substring(0,2), startTime.substring(3,5)),
end: new Date(end.substring(0,4),end.substring(5,7)-1, end.substring(8,10),
endTime.substring(0,2)-2, endTime.substring(3,5)),
url: "events/"+eventID});
Hours and minutes can be added to the new Date array and displayed correctly.
Related
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/
I am trying to use the Full Calendar component to show 3 days in agenda Day view or eventually using the vertical resource view.
I tried using the example custom view but no luck.
Is it possible to show 3 days, one below another in the day view ?
I am using this constructor, but I don't want the days to be next to each other, but underneath each other.
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
defaultDate: '2017-12-07',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
},
views: {
agendaTwoDay: {
type: 'agenda',
duration: { days: 3 },
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
//groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
groupByDate: true
}
}
You can't show the days below each other in an agenda style view, no. Its whole layout scheme is oriented horizontally. You can easily show them side-by-side, in the normal agenda style.
The vertical resource view provided by the Scheduler plug-in is essentially the same as the agenda view, but with each day split out into sub-columns for each specified Resource.
If you want days to appear one below the other, your only option is the "list"-style view. This will show things vertically, but you lose the time grid.
This code will achieve both of those types of view with a 3-day span, so you can see the difference:
views: {
agendaThreeDay: {
type: 'agenda',
duration: {
days: 3
},
buttonText: '3 day agenda'
},
listThreeDay: {
type: 'list',
duration: {
days: 3
},
buttonText: '3 day list'
}
},
Here is a working demo: http://jsfiddle.net/sbxpv25p/104/
If neither of those satisfy what you want, then your only other option is to make a completely custom view type (see the second half of this documentation page: https://fullcalendar.io/docs/views/Custom_Views/). This is a complex and time-consuming task, so before embarking on such a thing you should consider whether one of the built-in types of view will really be satisfactory - they do convey the necessary information to the user, which is the main purpose of a calendar, even if it wasn't quite in exactly the layout you had imagined.
In order to show multiple days in Agenda View ( Day ) just add - and + how many hours you want ... For example -24 H for a day ahead and +24 H for a day after your selected day. Something like this:
views: {
firstView: {
type: 'agendaDay',
minTime: '-12:00:00',
maxTime: '36:00:00',
slotDuration: '00:30:00',
},
}
views: {
timeGridFourDay: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '4 day'
}
},
and add it to header:
header: {
left: 'prev,next',
center: 'title',
right: '.....,timeGridFourDay'
},
https://fullcalendar.io/docs/custom-views
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);
},
});
below is my code. i don't know why the calendar are working but no event displayed. I very appreciate your help.
var eventSTR = [{start: '2016-11-21',end: '2016-11-23',overlap: false,rendering : 'background', color: '#ff9f89'},];
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month',
},
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: false,
event : eventSTR
});
});
You're 99% there, just missing 2 things
1) you need to set the today variable before you set the document ready function:
var today = new Date();
2) you've misspelled the events property. You have:
event : eventSTR
it should read:
events : eventSTR
I am using the FullCalendar javascript library on my web site to display a calendar for each employee side-by-side. The calendar displays the Day view so it's easy to see everyones schedule for the day.
I have all of the calendars displaying properly side-by-side (each in their own div).
My problem is, when creating a new event by clicking on the calendar, the event always gets created on the last calendar on the page instead of the actual calendar you click on. I have a feeling it has to do with closure in the select callback function.
/*
* Setup calendars for each sales person
*/
var d = $.fullCalendar.parseDate($("#requested_date").val());
//employee id numbers (each employee has own calendar)
var employees = new Array(445,123,999,444);
for(i=0;i<employees.length;i++)
{
var employeeId = employees[i];
//clear any prevoius calendar info
$('#calendar_' + employeeId).html("");
calendar[employeeId] = $('#calendar_' + employeeId).fullCalendar({
header: {
left: '',
center: '',
right: ''
},
year: d.getFullYear(),
month: d.getMonth(),
date: d.getDate(),
defaultView: 'agendaDay',
minTime: 7,
maxTime: 19,
height: 650,
editable: true,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
calendar[employeeId].fullCalendar('renderEvent',
{
title: "This Estimate",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
calendar[employeeId].fullCalendar('unselect');
},
events: {
url: 'calendar/'+employees[employeeId],
type: 'POST',
data: {
'personId': employees[employeeId],
'ci_csrf_token': wp_csr_value
},
error: function() {
alert('there was an error while fetching events!');
}
}
});
}
Thanks
when you select a calendar employeesId is equal to 444 so it render event on the last calendar try this:
select: function(start, end, allDay , jsEvent ,view) {
$(view.element).parent().parent().fullCalendar('renderEvent',
{
title: "This Estimate",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
$(view.element).parent().parent().fullCalendar('unselect');
}