Full Calendar drag drop event and duration fix - javascript

I am trying to achieve event from drag and drop in duration hours of a day instead of days.
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function (eventEl) {
console.log(eventEl);
//console.log(eventEl.dataset);
//console.log(eventEl.innerText.trim());
var EventDetails = JSON.parse(eventEl.dataset.event);
//console.log(EventDetails.title + ' -- ' + EventDetails.duration);
return {
//title: eventEl.innerText.trim(),
title: EventDetails.title,
//duration: "00:45",
duration: { time: "00:45" },
//duration: EventDetails.time,
//duration: { days: 1 }
//duration: { days: parseInt(EventDetails.duration) },
description: 'Lecture',
minTime: "09:30:00",
maxTime: "18:30:00",
//slotDuration: '02:00' // 2 hours
}
}
});
As days are working if i add in like this duration: { days: 1 } how can i achieve in hours of that day which i have dragged, and also i want to fix that event after dropping from '09:00' to '18:30' hours and within that i require if someone goes beyond 9 hours instead of days should automatically add from '09:00' hours for next day i tried using minTime: "09:30:00", maxTime: "18:30:00" i tried using duration: "00:45" but didn't work.
Here is a image example

Related

FullCalendar 5 - How to show a coloured dot to the left of events in initialView: 'timeGridWeek' instead of solid fill

When I set the FullCalendar to:
initialView: 'dayGridWeek',
The Events are shown with coloured dots instead of solid fill (this is what I want). However, when I set the FullCalendar to:
initialView: 'timeGridWeek',
the Events appear as solid fill. How can I correct this please (i.e., show a coloured dot to the left of each Event)?
My code is:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
firstDay: 0, //Sunday
weekends: true, //Show the weekends
businessHours: { // days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Friday
startTime: '09:00', // a start time
endTime: '17:00', // an end time
},
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
locale: 'en-gb',
selectable: true, // gives ability to select multiple days and then have a callback event when this occurs
buttonIcons: false, // show the prev/next text
weekNumbers: true, // show week numbers
navLinks: true, // can click day/week names to navigate views
editable: true, // can make changes and add changes
dayMaxEvents: true, // allow "more" link when too many events
displayEventTime: false, // display the start time
displayEventEnd: false, // display the end time
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
},// display time with minutes
eventDisplay: 'auto', //Controls which preset rendering style events use. 'block' - changes an event with start and end times from a list-item to a block
eventConstraint: {
start: moment().format('YYYY-MM-DD'),/* This constrains it to today or later */
end: '2100-01-01', // hard coded goodness unfortunately
},
events: responseJson1a,//Populate Sessions/Events using JSON
I have added the following from Kibé M.C:
eventDidMount: function (info) {
//you need to get the color from "info" argument and place it on the CSS style let eventColor = info."YourEventColor"
if (info.event) {
info.el.insertAdjacentHTML("afterBegin", '<p class="largeDot" style="color:${info.borderColor}">•</p>');
}
},
I also tried:
style="color:${info.event.borderColor}"
However the dot is not picking up the 'red' from borderColor and the text drops out of the border:
Also, the 'month' and 'list' views have two dots:
You can use eventDidMount
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
...
eventDidMount: function (args: any) {
if (eventsExist) {
args.el.insertAdjacentHTML("afterBegin", "•");
}
},
UPDATE
You should only see one dot.
Send a screenshot of the two dots so I try debugging the issue
You can add CSS to define a fixed size
To have dynamic colors on the dot, you can simply do this:
eventDidMount: function (info)
//you need to get the color from "info" argument and place it on the CSS style
let eventColor = info."YourEventColor"
{ if (info.event) { info.el.insertAdjacentHTML("afterBegin", `<p style="color:${eventColor}">•</p>`);
} },
With the help of Kibe I got:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
firstDay: 0, //Sunday
weekends: true, //Show the weekends
hiddenDays: calendarHidenDays, //non working days to hide
businessHours: { // days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Friday
startTime: '09:00', // a start time
endTime: '17:00', // an end time
},
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
locale: 'en-gb',
selectable: true, // gives ability to select multiple days and then have a callback event when this occurs
buttonIcons: false, // show the prev/next text
weekNumbers: true, // show week numbers
navLinks: true, // can click day/week names to navigate views
editable: true, // can make changes and add changes
dayMaxEvents: true, // allow "more" link when too many events
displayEventTime: false, // display the start time
displayEventEnd: false, // display the end time
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
},// display time with minutes
eventDisplay: 'auto', //Controls which preset rendering style events use. 'block' - changes an event with start and end times from a list-item to a block
eventConstraint: {
start: moment().format('YYYY-MM-DD'),/* This constrains it to today or later */
end: '2100-01-01', // hard coded goodness unfortunately
},
events: responseJson1a,//Populate Sessions/Events using JSON
eventDidMount: function(info) {
console.log(info.event.borderColor);
var icon = info.event.extendedProps.icon;
if (info.event.extendedProps.icon) {
if (calendar.view.type == "dayGridMonth") {
$(info.el).find('.fc-event-title').append("<i class='fa "+icon+"'></i>");
}else {
$(info.el).find('.fc-event-title').prepend("<i class='largeDot' style='color:"+info.event.borderColor+"'>•</i>").append("<i class='fa "+icon+"'></i>");
}
}else{
//
if (calendar.view.type != "dayGridMonth") {
$(info.el).find('.fc-event-title').prepend("<i class='largeDot' style='color:"+info.event.borderColor+"'>•</i>");
}
};
},
});
The variables passed back from the serverside are:
id, title, daysOfWeek, startRecur, endRecur, startTime, endTime, backgroundColor, classNames, extendedProps1, icon, setAllDay, borderColor, textColor

Fullcalendar resourceTimeGrid month view render

Hi guys i want to separate a month into 4-5 weeks so that each week will have 7 days.I cannot find a way to display the whole month in this view only the current week as you can see each week column contains the actual week days, but i would like to render the whole month with this scheme.
this.calendarOptions = {
headerToolbar: {
left: '',
center: 'title',
right: 'prev next'
},
defaultAllDay:false,
aspectRatio: 2.45,
editable: false,
slotMinWidth: 75,
selectable: false,
eventClassNames: ['mt-1'],
eventResourceEditable: false,
eventOverlap: false,
initialView: 'resourceTimeGridSevenDay',
resourceLabelClassNames: ['p-0'],
resourceGroupLabelContent: (arg) => {
return {html: `<strong>${arg.groupValue}</strong> `};
},
resourceLabelContent : (arg) => {
return {html: `<span> ${arg.resource._resource.title}</span> `};
},
slotLabelContent: (arg) => {
return {html: ` `};
},
eventClick: (arg) => {
console.log('event click')
},
now: new Date().toISOString(),
resourceAreaHeaderContent: 'Sponsor/Protocol',
resourceAreaWidth: '10%',
views: {
resourceTimeGridSevenDay: {
type: 'resourceTimeGrid',
duration: {days: 7},
slotDuration: { weeks: 4 },
}
},
events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
fixedWeekCount: false,
rerenderDelay: 2,
progressiveEventRendering: true,
showNonCurrentDates: false,
initialDate: new Date().toISOString(),
}
}
I'm not sure you can create exactly what you've shown in your screenshot using fullCalendar, but it's possible to get fairly close, and it might be good enough.
In the documentation for the slotLabelFormat setting, it mentions that for the timeline view it can be configured with multiple rows in the label area.
So you could still use the "month" view to get the correct number of days, but set up the slot labelling like this:
views: {
resourceTimelineMonth: {
slotLabelFormat: [
{ week: 'long', }, // top level of text
{ weekday: 'short', day: '2-digit' } // lower level of text
],
}
},
It shows the week number as the week of the year rather than week of the month, and the date format is similar but not identical (and will vary a bit depending on your locale anyway).
Live demo: https://codepen.io/ADyson82/pen/BawNMEp
If you want even more control of the exact date format, you'd need to use one of the plugins as mentioned in the Date Formatting documentation.
Documentation:
slotLabelFormat
Date Formatting

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);
},
});

Fullcalendar move only by 1 day (prev/next) in week view

Is there a way in fullcalendar on the week view to move by 1 day (next/prev buttons) instead of jumping 1 week back and forth?
The reason behind is because when I create an event on the week view I am limited to the last day and can't prolong it to the next week...
They now have added dateIncrement as a option.
$('#calendar').fullCalendar({
header: {
left: 'today prev,next',
center: 'title',
right: 'CustomW,CustomF,CustomS',
},
views: {
CustomW: {
type: 'timelineWeek',
duration: { days: 7 },
buttonText: 'Week',
dateIncrement: { days: 1 },
},
CustomF: {
type: 'timelineWeek',
duration: { days: 15 },
buttonText: '15 day',
dateIncrement: { days: 4 },
},
CustomS: {
type: 'timelineMonth',
duration: { days: 30 },
buttonText: 'Month',
dateIncrement: { days: 10 },
},
},
Okay I figured out how to make this work for both subtraction and addition. I had to alter the fullcalendar.js file itself which means there could be some other complications as I have not tested this beyond clicking the next and previous buttons. I would not recommend doing this approach if you plan on utilizing more than one view.
Force currentview to change on click
Comment out lines 9741 - 9747 and 9759
This allows the currentview to change when clicking the next button even though you haven't actually left the currentview
Previous Click
Line 7931 needs to be changed to
date.clone().startOf('day').subtract(1)
Next Click
Line 7939 needs to change to
date.clone().startOf('day').add(1, 'day')
You can create custom view like this:
$('#calendar').fullCalendar({
header: {
center: 'month,basicWeekOneDay' // buttons for switching between views
},
views: {
basicWeekOneDay: {
type: 'basicWeek',
duration: { days: 1 },
buttonText: '1 day'
}
}
});
Here is fiddle for the same:
https://jsfiddle.net/raj20090/j99f7zqw/2/

Creating events on multiple calendars with FullCalendar.js

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');
}

Categories