Right now my Weekly Calendar shows up with one hour of interval. I'd like to know if it's possible to change this interval as I like (e.g 1hour30min interval).
My code to build the calendar:
$('#calendar').fullCalendar({
header: false,
height: 800,
defaultView: 'agendaWeek',
views: {
week: {
columnFormat: 'dddd'
}
},
firstDay: 1,
weekends: false,
});
Try out this
$("#calendar").fullCalendar({
header: false,
height: 800,
defaultView: 'agendaWeek',
views: {
week: {
columnFormat: 'dddd'
}
},
firstDay: 1,
weekends: false,
allDaySlot: false,
slotDuration: "01:30:00"
});
http://jsfiddle.net/5ax71o58/
You can set slotLabelInterval:
slotLabelInterval: "01:30:00"
Related
My site is hosted on a server in an Asian country. And I want to change the time zone for displaying the events to Germany, but unfortunately it doesn't work.
i'm used timezone: 'Europe/Berlin' in fullCalendar
But this Code not work !!!
thank you
Edit :
a.$calendarObj = a.$calendar.fullCalendar({
slotLabelFormat: 'HH:mm',
slotDuration: "00:10:00",
minTime: "00:00:00",
maxTime: "23:59:00",
defaultView: "month",
allDaySlot: 0,
handleWindowResize: !0,
height: l(window).height() - 200,
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
events: "/Calender/GetEvents",
editable: 1,
droppable: 1,
eventLimit: 1,
selectable: 0,
displayEventTime: 1,
timezone: 'Europe/Berlin'
});
is not fix for me.
i change timezone:
timezone: 'Europe/Berlin' to timezone: 'local'
and buy new server from Germany and it fixed.
I'm using full calendar 3.4 and trying to show day names in the month view, but nothing seems to work.
Works fine in Week view though.
Tried multiple different things and here is my configuration:
$('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
timeFormat: 'H:mm',
firstDay: 1,
views: {
month: {
columnHeaderFormat: 'ddd'
}},
header: {
right: 'prev,next today',
left: 'title',
center: 'month,agendaWeek,agendaDay'
} });
Any ideas how I can make it to work?
What momnet version you are using ? Try this code snippet. I can see day names in the header.
(function($) {
$(document).ready(function() {
var fullcalendar = $('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
timeFormat: 'H:mm',
firstDay: 1,
views: {
month: {
columnHeaderFormat: 'ddd'
}
},
header: {
right: 'prev,next today',
left: 'title',
center: 'month,agendaWeek,agendaDay'
}
});
});
})(jQuery)
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<div id="calendar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
columnFormat: {
month: 'dddd'
}
For fullCalendar I have written the code below:
$('#mycalendar').fullCalendar(
{
allDaySlot:false,
slotDuration: '00:30:00' ,
//slotMinutes: '120',
lang: currentLangCode,
minTime: '4:00am',
maxTime: '24:00pm',
slotEventOverlap: true,
slotLabelFormat:'h(:mm)a',
showAgendaButton: true,
columnFormat: { month: 'ddd', week: 'ddd M/D', day: 'ddd M/D' },
timeFormat: 'H:mm',
defaultView: 'listWeek',
eventLimit: true,
theme:false,
editable: true,
contentHeight:'auto',
weekends: false ,
//timezoneParam: 'America/Los_Angeles',
//ignoreTimezone: false,
header:
{
left: 'prev,next today',
center: 'title',
// right: 'agendaWeek'
right: 'month,agendaWeek,agendaDay,listWeek'
},
views: {
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' },
month: {
columnFormat: 'ddd'
},
agenda: {
columnFormat: 'ddd'
}
},
I am getting below error for agendaWeek and agendaDay:
I am using:
jQuery JavaScript Library v3.3.1
FullCalendar v3.9.0
It's because your values for minTime and maxTime and invalid and not parseable as momentJS objects. fullCalendar relies on momentJS to do its date and time processing. Because of this the calendar does not know where to start the display (and thus where the "top" of the calendar is, hence the error message).
Set them to
minTime: '04:00',
maxTime: '24:00',
instead.
See here for a working demo: http://jsfiddle.net/sbxpv25p/581/
See http://momentjs.com/docs/#/parsing/string/ for a list of valid date/time formats which momentJS can recognise. You'll see that "am" and "pm" are not recognised items. In any case they are also unnecessary since you're already specifying the time in 24hr format.
I'm using fullcalendar v2.9.1 and I would like to show the calendar with slotDuration of '00:90:00' and maxTime: "22:00:00", minTime: "08:00:00".
But the calendar not show the hours in the left column.
When I removed the min/max time, I noticed that there is no hour of 8am, only 6:30 and 9:00 (because of slotDuration of 90 min).
Here's the settings:
views: {
agendaOneDay: {
type: 'agenda',
duration: { days: 1 },
// buttonText: '2 day',
weekends: false,
columnFormat: 'ddd M/D'
}
},
timezone: "local",
header: false,
height: calendarService.getCalendarHeightViaScreenSize(contact),
slotDuration: '00:90:00',
slotEventOverlap: false,
// slotLabelInterval: '02:00:00',
defaultView: device_type_mobile ? 'agendaOneDay' : 'agendaWeek',
eventBackgroundColor: 'white',
eventTextColor: '#3f51b5',
firstDay: 1,
weekends: false,
selectable: true,
eventOverlap: false,
selectOverlap: contact ? true : false,
editable: contact ? false : true,
maxTime: "22:30:00",
minTime: "08:00:00",
axisFormat: 'HH:mm',
allDaySlot: false
Can someone help me on this regard, please?
UPDATE:
I tried to use moment.js:
slotDuration: moment.duration('00:90:00'),
Even that, it's not working.
Thanks!
It's never too late...
On "maxTime:" | type "string" is not assignable
You need to write:
minTime: duration("hh:mm:ss"),
maxTime: duration("hh:mm:ss"),
I'm using fullcalendar from http://fullcalendar.io
I have it setup for only selecting slots between 9am-5pm, although when in month view if a day is clicked it automatically tries to schedule for 12:00am (00:00:00) --- is there a way to set the default time on month view to 9am ?
my config:
$calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: 475,
defaultDate: moment(),
defaultView: 'agendaWeek',
minTime: "09:00:00",
maxTime: "17:00:00",
titleFormat: "MMMM D, YYYY",
columnFormat: "ddd. MMMM D",
weekends: false,
editable: false,
allDaySlot: false,
eventOverlap: false,
eventDurationEditable: false,
eventLimit: true, // allow "more" link when too many events
eventSources: ['events.php'],
timeFormat: 'h:mm',
businessHours: { start: '09:00', end: '17:00' }
});
EDIT - I found a small solution by doing what i posted below but i'm wondering if there is another way around in the configuration?
dayClick: function(date, jsEvent, view) {
var time = moment(date).format('HH:mm:ss');
if (time == "00:00:00") {
date = moment(date).set('hour', 9);
}
}