I'm working with FullCalendar and I'm using it for a business which has varying hours
Mon, Tue, Wed, Fri is 09:00 - 17:00.
Thu is 09:00 - 19:00.
businessHours: {
start: '09:00', // a start time (10am in this example)
end: '17:00', // an end time (6pm in this example)
dow: [ 1, 2, 3, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
}
http://fullcalendar.io/docs/display/businessHours/
How can this be achieved?
To use variable hours for business hours, you need to use background events like this:
events:
[
{
id: 'available_hours',
start: '2015-1-13T8:00:00',
end: '2015-1-13T19:00:00',
rendering: 'background'
},
{
id: 'available_hours',
start: '2015-1-14T8:00:00',
end: '2015-1-14T17:00:00',
rendering: 'background'
},
{
id: 'work',
start: '2015-1-13T10:00:00',
end: '2015-1-13T16:00:00',
constraint: 'available_hours'
}
]
Notice in the last event it has the constraint filled in? This says that this can only be placed within an available hours slot. Using constraints, you can make flexible business hours.
For more information, see this link,
http://fullcalendar.io/docs/event_ui/eventConstraint/
Try this - Adding an event for each business hour, like so:
{
...
events: [
// business hours 1
{
className: 'fc-nonbusiness',
start: '09:00',
end: '17:00',
dow: [1, 2, 3, 4], // monday - thursday
rendering: 'inverse-background'
},
// business hours 2
{
className: 'fc-nonbusiness',
start: '10:00',
end: '15:00',
dow: [6], // saturday
rendering: 'inverse-background'
}],
...
}
NOTE : className and rendering are important options for this to work.
Good Luck.
Related
I am working on a drag-drop app for managing employees' shifts, it basically consists of two parts:
1- employees cards on the top (these contain all unassigned employees who have not any shifts)
2- calendar (HTML table element) for the assigned employees and their shifts on weekdays [the app](https://i.stack.imgur.com/5MLJ2.png)
each employee has availability for all weekdays something like this
const DEFAULT_MEMBER_AVAILABILITY = {
friday: { start: '10:00', end: '23:00', all_day: false }, // part-time availability in friday
monday: { start: 'null', end: 'null', all_day: false }, // not available in monday
saturday: { start: '00:00', end: '00:00', all_day: true },// full-time availability in saturday
sunday: { start: '00:00', end: '00:00', all_day: true },
thursday: { start: '00:00', end: '00:00', all_day: true },
tuesday: { start: '00:00', end: '00:00', all_day: true },
wednesday: { start: '00:00', end: '00:00', all_day: true },
};
to show a member's availability just hover on his card and the first row will be colored based on his availability like this:
1- not available on the day: red
2- full-time: green
3- part-time: yellow
[hover on a card](https://i.stack.imgur.com/uRaDU.png)
and the slots will be reset again when the mouse leaves the card.
the user can assign a shift to an employee by dragging his card and dropping it on the first row.
while dragging the first row will be colored based on his availability like the previous rules.
[dragging an employee card](https://i.stack.imgur.com/E50Rp.png)
once dropping the employee card will be removed from top and a new row inserted in calender with a new shift in the day dropped on.
the problem is when I drop a card the card is removed and the card which is next to it and will be **in the removed card position** behave as I hover on it (shows the related member availabilty) even the mouse on the calender.
**note\***
I am using event delegtion since the dom cahnges alot with 'removing cards' and 'adding cards' with something like this:
this.#employeesCardsContainer.addEventListener(
'mouseenter',
this.#handleEmployeesCardsMouseEnter.bind(this),
true
);
I am not sure if this is helpful or not
"the card which is next to it and will be in the removed card position"
I think the problem happen because of this,I think the mouse position is not being updated while dragging and when dropping the browser behave as the mouse still in his position before dragging.
I am using FullCalendar 5 and JSON to populate the events:
id;
title;
daysOfWeek;
startRecur;
endRecur;
startTime;
endTime;
backgroundColor;
I have a series of Events with a start and end date. When I click on an Event the end date is showing as the date cell the Event occurrence is in. I want to retrieve the end date of the series of Events. I am using info.event.end.
This is the code:
eventClick: function(info) {
var eventObj = info.event;
$('#updateDescription').val(eventObj.title);
$('#updateStartDate').val(moment(eventObj.start).format('DD/MM/YYYY'));
$('#updateEndDate').val(moment(eventObj.end).format('DD/MM/YYYY')); //Shows as 29/11/2021 should be 01/12/2021
$('#updateStartTime').val(moment(eventObj.start).format('HH:mm'));
$('#updateEndTime').val(moment(eventObj.end).format('HH:mm'));
$('#updateColour').val(eventObj.backgroundColor);
$('#ecClickModal').modal('show');
},
id: '001,
title: 'Event A',
daysOfWeek: '[1, 4]',
startRecur: '2021-01-01',
endRecur: '2022-12-30',
startTime: '10:00',
endTime: '11:00',
backgroundColor: 'Red',
id: '002,
title: 'Event B',
daysOfWeek: '[2, 3]',
startRecur: '2021-05-01',
endRecur: '2023-05-30',
startTime: '09:00',
endTime: '10:00',
backgroundColor: 'Blue',
id: '003,
title: 'Event C',
daysOfWeek: '[5]',
startRecur: '2020-01-01',
endRecur: null,
startTime: '10:00',
endTime: '11:00',
backgroundColor: 'Green',
When I click on 'Event B' I want to get the end date '2023-05-30'.
Currently, if I click on the occurrence of 'Event B' on '30/11/2021' then:
info.event.start is 30/11/2021
info.event.end is 30/11/2021
Recurring Events do not need an end date. So the solution must be able to cater for 'Event C' (i.e., a null end date please).
Currently there are no in built functions in FullCalendar to fetch the last date from a series of events. You will have to fetch all events using calendar::getEvents and then find the end date of the last event.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
id: 'a',
title: 'my event a',
start: '2021-11-01',
end: '2021-11-02'
},
{
id: 'b',
title: 'my event b',
start: '2021-11-03',
end: '2021-11-04'
},
{
id: 'c',
title: 'my event c ',
start: '2021-11-05',
end: '2021-11-06'
},
{
id: 'd',
title: 'my event d',
start: '2021-11-07',
end: '2021-11-08'
},
],
});
calendar.render();
// Fetching all events
const allEvents = calendar.getEvents();
// Sorting the events based on the last date (descending)
allEvents.sort((eventA, eventB)=> {
return eventB.end-eventA.end;
});
const lastDate = allEvents[0].end;
});
info.event.end only gives you the end date of a single event.
Also, before I stumble into it, how do I manage a null end date please?
Could you please explain the issue?
I am developing an application with ionic , in which I need the user to program the hours and days in which must reach a reminder.
I am using the plugin Cordova local notifications , as I can create a notification for example be repeated every Monday or the day that the user place ?
I’m around trying to do this but does not work
var date = new Date();
date.setDate(date.getDate());
date.setHours(15);
date.setMinutes(0);
date.setSeconds(0);
cordova.plugins.localNotifications.schedule({
id: 1,
title: 'Daily Training Reminder',
at: date,
every: 'Monday'
});
Can anyone help!!
this.localNotification.schedule({
"id": Math.floor((Math.random() * 1000)),
'title': 'Some Title',
'trigger': {
'every': {
'weekday': 1,
'hour': 10,
'minute': 40
},
'count': 1
}
});
Also i have used Ionic LocalNotificaiton
here hour is 24-hour based minute is minute count is count of notification
so it will receive a notification on Monday at 10:40
weekday:1 (Monday)
weekday:2 (Tuesday)...
The ionic wrapper is outdated and doesn't work so use the cordova plugin and then do something like
declare let cordova: any; //above export class
cordova.plugins.notification.local.schedule({
title: "title",
text: "body",
trigger: { at: new Date(),every: 'day', count: 1 }
});
I'm building a grade school, I have a bunch of disciplines and it's day of the week. I need to insert these disciplines into the calendar. The problem is:
There is no way to add only by the day of the week. See:
Today is Sunday( 04/09/2016 ). But the calendar days are from the PAST week.
So, if you have:
var day = 'monday';
When you are going to insert an event in runtime you'd do like so:
$('#calendario').fullCalendar(
'renderEvent',
{
id: id
title: $(this).find('a').text(),
start: year+ '-' +month+ '-' +day+ 'T' + startTime,
end: year+ '-' +month+ '-' +day+ 'T' + endTime,
backgroundColor: color,
className: someClass
}
)
As you can see, I HAVE TO specify dayof the month.
The problem is: Even using weekView, I can't work with events using only week days... I have to give the entire date(YYYY-MM-DD).
Today is sunday(04/09/2016). The calendar is half last month, half current month. How am I supposed to insert an event only by the day of the week ?
Also tried working with momentjs.
moment().day(1).hours(10).minutes(0).format('YYYY-MM-DD')
moment will return the second day of the week (0 - sunday, 1 - monday ), wich is 05 (currently week) and not the same as fullCalendar 29(last week). So I have no Idea how to insert my disciplines/events into the calendar.
You can provide events as a function and loop through the time period currently displayed, creating events on specific days
https://jsfiddle.net/0roafa2f/
$('#calendar').fullCalendar({
events: dowEvents
});
function dowEvents(start, end, tz, callback) {
var events = [];
var curr = start;
while(curr <= end) {
if(curr.format('dddd') === 'Monday') {
events.push({
title: 'Monday event',
start: moment(curr)
});
}
curr = curr.add(1, 'day');
}
callback(events);
}
According to the source code of the demo on this page:
https://fullcalendar.io/
meanwhile, events is an array object that can be listed manually, fetched from a url with json response or fetched from a function as stated here: https://fullcalendar.io/docs/event-data
$(function() {
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
$('#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,
events: [
{
title: 'All Day Event',
start: YM + '-01'
},
{
title: 'Long Event',
start: YM + '-07',
end: YM + '-10'
},
{
id: 999,
title: 'Repeating Event',
start: YM + '-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: YM + '-16T16:00:00'
},
{
title: 'Conference',
start: YESTERDAY,
end: TOMORROW
},
{
title: 'Meeting',
start: TODAY + 'T10:30:00',
end: TODAY + 'T12:30:00'
},
{
title: 'Lunch',
start: TODAY + 'T12:00:00'
},
{
title: 'Meeting',
start: TODAY + 'T14:30:00'
},
{
title: 'Happy Hour',
start: TODAY + 'T17:30:00'
},
{
title: 'Dinner',
start: TODAY + 'T20:00:00'
},
{
title: 'Birthday Party',
start: TOMORROW + 'T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: YM + '-28'
}
]
});
});
As far i understand if you want the event to be based on days like(sun,mon,tues) etc you can use dow it accepts array [0,1,2,3,4,5,6] sun,mon,tues respectively. Use start:"00:00:00" if you want it to repeat every day. e.g
Try this
events.push({
start: '00:00:00',
title: 'recursive event',
dow: [0,1,2] // each sun,mon,tues
})
I want to use a fullcalendar to configure some data that applies to days of the week, but not tied to specific dates. So I want to show a calendar that doesn't include the actual dates in the header, and instead just shows the day of the week
So:
Mon, Tue, Wed, ...
instead of
Mon 2/1, Tue 2/2, Wed 2/3, ...
Use below common configuration for all views..
columnFormat: 'ddd', // Or any moment format as you require to show.
You also can give View-Specific-Options.
$('#calendar').fullCalendar({
views: {
basic: {
columnFormat: 'ddd'
},
agenda: {
columnFormat: 'ddd'
},
week: {
columnFormat: 'ddd'
},
day: {
columnFormat: 'ddd'
}
}
});
This works for me.