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.
Related
The spec for the rrule plugin says that Until dates are Inclusive. I'm not seeing that. Am I mis-reading?
https://github.com/jakubroztocil/rrule
If given, this must be a Date instance, that will specify the limit of the recurrence. If a recurrence instance happens to be the same as the Date instance given in the until argument, this will be the last occurrence.
I have this test:
calendaring.testRecur = function(dayOrWeek){
var rruleDataWeekly = {
freq: 'WEEKLY',
interval: 1,
byweekday: [ 'MO', 'WE', 'FR' ],
dtstart: '2019-11-01T10:30:00',
until: '2019-11-15'
};
var rruleDataDaily = {
freq: 'DAILY',
interval: 1,
count: 5,
dtstart: '2019-11-04T09:30:00',
};
var rruleData = dayOrWeek === "day" ? rruleDataDaily : rruleDataWeekly;
var title = dayOrWeek === "day" ? "Test Daily" : "Test Weekly";
var newEvent = {
title: title,
duration: "00:45",
rrule: rruleData
};
calendaring.calendar.addEvent(newEvent);};
And this is my config for the calendar:
calendaring.calendar = new Calendar(calendarEl, {
events: '/myurl',
plugins: ['rrule', 'interaction', 'dayGrid', 'timeGrid', 'bootstrap', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay',
},
defaultView: 'timeGridWeek',
slotDuration: '00:15',
slotLabelInterval: '01:00',
minTime: '06:00',
maxTime: '21:00',
allDaySlot: false,
slotEventOverlap: false,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'List',
},
themeSystem: 'bootstrap',
editable: true,
selectable: true,
droppable: true,
fixedWeekCount: false,
hiddenDays: [ 0, 6 ],
eventLimit: 6,
});
calendaring.calendar.render();};
The issue was I didn't have a time associated with my UNTIL. So, it assumes midnight, not 23:59:59. Phew. Thanks #ADyson for the help.
You can use the code below to show a day, daily, weekly, every two weeks and monthly events with a tooltip on mouse hover event.
In this example you can see how we can set up rrule in FullCalendar.
Visit here- https://stackoverflow.com/a/68770685/9673996
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"),
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"
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);
}
}