I have an instance of FullCalendar (v1) where each event does not align with the corresponding time slot, but only initial load. As soon as the browser is zoomed or restored (up or down) or resized, it corrects itself. Has anyone seen something like this? Nothing special in the setup.
$('#calendar').fullCalendar({
theme: true,
selectable: true,
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
header: { left: 'title', center: 'month,agendaWeek,agendaDay', right: 'prev,next,today' },
aspectRatio: 1,
slotDuration: '00:30',
minTime: '08:00',
maxTime: '18:59',
I am listing dates on FullCalendar and as you can see in the image, some dates show up correctly and some don't. I cannot find any reason that this is the case. The only thing the incorrect events have in common is that they have a start time of 8pm or later.
I selected the August 17th, which has two events. Only one shows correctly on the calendar.
Event data for the two events shown:
[2020-08-21 13:12:32,250] [INFO] [views : log_report] 20776 : 140579017103168 : {'_state': <django.db.models.base.ModelState object at 0x7fdb0e8f5518>, 'id': 140, 'created_date': datetime.datetime(2020, 8, 12, 19, 59, 42, 969082, tzinfo=<UTC>), 'modified_date': datetime.datetime(2020, 8, 17, 2, 33, 1, 101542, tzinfo=<UTC>), 'author_id': 324, 'session': '', 'event_type': 'lfp_event_paid', 'recipient_id': None, 'parent_hub_id': '3f42ec9e-8f42-4d0a-94ca-c4a6e98b01d6', 'event_title': 'Rise of the Runelords, a Pathfinder Adventure Path', 'unique_id': UUID('27268185-f906-49b0-b760-704bc2f9e3ef'), 'start_time': datetime.datetime(2020, 8, 17, 0, 15, tzinfo=<UTC>), 'end_time': datetime.datetime(2020, 8, 17, 3, 15, tzinfo=<UTC>), 'budget_amount': 10, 'budget_details': 'No Budget Details', 'min_players': 2, 'max_players': 5, 'lfg_state': 'LFP', 'game_played_id': 27, 'other_game': '', 'session_type': 'One-Shot', 'location': 'Roll20 and Discord', 'location_link': 'https://app.roll20.net/campaigns/details/7386210/rise-of-the-runelords-anniversary-edition', 'req_status': 'inactive', 'paid_success': False, 'is_recurring': False, 'is_closed': False, 'is_full': False, 'is_private': False, 'is_paid': False, 'is_deleted': False}
[2020-08-21 13:12:32,249] [INFO] [views : log_report] 20776 : 140579017103168 : {'_state': <django.db.models.base.ModelState object at 0x7fdb0e8f5358>, 'id': 145, 'created_date': datetime.datetime(2020, 8, 14, 0, 51, 42, 543054, tzinfo=<UTC>), 'modified_date': datetime.datetime(2020, 8, 17, 23, 2, 51, 389649, tzinfo=<UTC>), 'author_id': 324, 'session': '', 'event_type': 'lfp_event_free', 'recipient_id': None, 'parent_hub_id': 'a038e240-6a86-47b3-aa6c-5409edbb4362', 'event_title': 'Monday Night Age of Worms', 'unique_id': UUID('c4edb4c8-6fcd-4bb7-9c17-2be96c15f0bf'), 'start_time': datetime.datetime(2020, 8, 17, 23, 0, tzinfo=<UTC>), 'end_time': datetime.datetime(2020, 8, 18, 2, 0, tzinfo=<UTC>), 'budget_amount': 0, 'budget_details': 'No Budget Details', 'min_players': 3, 'max_players': 4, 'lfg_state': 'LFP', 'game_played_id': 1, 'other_game': '', 'session_type': 'One-Shot', 'location': 'Foundry', 'location_link': 'http://71.179.132.53:30000', 'req_status': 'inactive', 'paid_success': False, 'is_recurring': False, 'is_closed': False, 'is_full': False, 'is_private': False, 'is_paid': False, 'is_deleted': False}
Here is my event code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 560,
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
defaultDate: '{% now "Y-m-d" %}',
eventRender: function(info) {
$(info.el).tooltip({
title: info.event.title,
placement: "bottom",
trigger: "hover",
container: "body"
});
},
header: {
left: 'title',
center: '',
right: 'prev, next'
},
events: [
{% for event in connected_events %}
{
title: "{{event.event_title}}",
start: "{{event.start_time|date:'c'}}",
end: "{{event.end_time|date:'c'}}",
url: "{% url 'events:event-detail' event.unique_id %}",
details: "test",
{%if event.budget_amount > 0 and event.lfg_state == 'LFGM' %}color : "#ff8f07"{%elif event.budget_amount <= 0 and event.lfg_state == 'LFGM' %}color : "#d943c5"{%elif event.budget_amount > 0 and event.lfg_state == 'LFP'%}color : "#1ad914"{%else%}color:"#38b3ff"{%endif%},
},
{% endfor %}
],
});
calendar.render();
});
It's important to realise that 2020-08-17 00:15 in UTC is 2020-08-16 20:15 in EST/EDT - because EST is 4 hours behind UTC - so it's actually 8:15pm the previous day. See https://savvytime.com/converter/utc-to-est/12-15am to convert between the timezones easily.
That's why Rise of the Runelords shows on the 16th in fullCalendar. So the calendar is correct and the cards on the right-hand-side are wrong. (And your observation is about events after 8pm is entirely correct - but now you know why!)
The relevant code isn't shown in the question, but you mentioned that upon investigation you discovered that the date shown in the cards was being loaded as a string without doing a timezone conversion (whereas the times were converted correctly, as was the whole datetime object passed to fullCalendar), and that once you sorted this out the date showed in the card correctly. A similar fix will also need to be applied to the code (also not visible) which decides which cards to display when a date is clicked in the calendar.
Iam working on full calendar version v3.2.0.But In week and time view,Time slots are not appearing in left hand column
I have tried following Code in calendar:
$('#calendar').fullCalendar({
header: {
left: 'today prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
contentHeight:'auto', //auto
slotDuration: '00:15:00',
slotLabelInterval: 15,
slotLabelFormat: 'h(:mm)a',
defaultDate: moment().format("YYYY-MM-DD"),
navLinks:true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
weekends: component.get('v.weekends'),
eventBackgroundColor: component.get('v.eventBackgroundColor'),
eventBorderColor: component.get('v.eventBorderColor'),
eventTextColor: component.get('v.eventTextColor'),
events: eventArray,
I am using https://fullcalendar.io/ API to create a custom view for Weekly events and monthly events. The issue I am facing is that for weekly view, I want the start of the week to be Monday (1) and monthly to remain Sunday (0).
If I were to add firstDay: 1 as seen below, it will apply to both customWeek and customMonth views. I only need it for customWeek.
header: {
left: '',
center: '',
right: 'customWeek, customMonth'
},
firstDay: 1,
droppable: true,....
Complete code.
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: 'customWeek, customMonth'
},
droppable: true,
eventStartEditable: true,
eventLimit: true,
eventLimitText: "MORE",
views: {
customWeek: {
type: 'basicWeek',
buttonText: ' ',
eventLimit: 1,
columnFormat: 'D dddd'
},
customMonth: {
type: 'month',
buttonText: ' ',
eventLimit: 1,
columnFormat: 'dddd',
defaults: {
fixedWeekCount: false
}
}
},
defaultView: 'customWeek',
events: data});
Any ideas or suggestion is appreciated.
As far as I can tell, you can't. It's not one of the options you can pass to a view. The only solution would be to implement a completely custom view which overrides the view class, as detailed here: https://fullcalendar.io/docs/views/Custom_Views .
But that's a lot of work, and I'd argue it's not worth it. I suspect this feature is actually by design - starting on a different day on each view sounds like a great way to confuse your users, who will expect and/or assume that the display is consistent.
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,