Is there a way in FullCalendar to disable & grey out certain days (for example weekends and national holidays)?
I tried something like this:
events: [
{
allDay: true,
title: "disabled",
editable: false,
id: "3",
start: "2022-11-15",
end: "2022-11-16",
color: "grey",
},
Related
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>
I have a json data which contains the start and end date of my event.
$(".full-calendar-demo").fullCalendar({
editable: true,
eventDurationEditable: true,
events:[
{
id: 83,
title: "Conference",
start: '2014-11-12T5:00:00',
end: '2014-11-13T5:00:00',
}];
});
How can I enable the resizing of events. I'm using FullCalendar v2.2.3
how about adding resizable:true
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.
We don't have any duration for our events that we visualize using angular-ui-calendar, so we don't want the user to do any resizing, while still being able to drag&drop the events to move them to another date and time. Where can I configure this?
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
// here?! resizable: false won't work
$scope.events = [
{
// or here? resizable: false won't do anything
title: "Test", start: new Date(2014, 0, 1, 12, 0), end: new Date(2014, 0, 1, 12, 30), allDay: false}
];
Of course I could just revert the resize in the event handler (eventResize), but I think that results in a bad user experience.
Also: We would like to hide the end date of an event, since we don't have any (skipping the endDate property will just result in a two hour duration, so using half an hour will at least keep the size small)
Thanks!
Depends on your version of fullcalendar. The latest is eventDurationEditable (since 1.6.3).
http://arshaw.com/fullcalendar/docs/event_ui/eventDurationEditable/
Example:
$('#calendar').fullCalendar({
editable: true,
eventDurationEditable: false, ...
Deprecated version
$('#calendar').fullCalendar({
editable: true,
disableResizing: true, ...
Current version of full calendar has depreciated disableResizing: true option.
You could simply alter the code from following:
$('#calendar').fullCalendar({
editable: true,
eventDurationEditable: false, ...
To:
$('#calendar').fullCalendar({
editable: false,
Is possible change background-color on same td in fullcalendar?
for example: I like have blue beckground at Mo 10:00-14:00 and green beckground at Tu 9:30-11:30.
I visit: http://code.google.com/p/fullcalendar/issues/detail?id=144&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars
But it is possible now and how?
P.S: Sorry, I have bad English :(
Perhaps we could have a little more information about it JGB146? I am currently looking for this to be done: FullCalendar: Change agendaDay background-color
you asked for a code snippet but it really is a basic calendar:
$('#calendar').fullCalendar({
events: "/HRV/GetEvents",
lazyFetching : false,
minTime: 9,
maxTime: 22,
firstHour: 9,
firstDay: 1,
slotMinutes: 15
});
Would love to be able to specify another option that goes like:
workingTimeRange: [
{
start: 9,
end: 12,
className: 'morningJob'
},
{
start: 13,
end: 17,
className: 'afterNoonJob'
}
]
That would be very useful of a feature.. I would implement my own but I am very new to jQuery/fullCalendar.