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.
Related
https://codepen.io/ziobit/pen/mdLaXGB
Fullcalendar 5.11.3 timeGridWeek.
Nothing fancy, but I did change the starting/ending time of the day.
All the events DO NOT EVEN touch/overlap with the start/end day.
Why the 2PM row (last one) is so tall? It looks like it's printing the whole hours without showing them.
Maybe it's a "feature", but if there is a way to avoid this, I would be happy :)
Right now, this is how the slots are defined:
slotMinTime: "08:00:00",
slotMaxTime: "15:00:00",
I also tried
slotMinTime: "08:00:00",
slotMaxTime: "14:59:59",
to no avail
Set the property expandRows to true :
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
allDaySlot: false,
initialView: 'timeGridWeek',
validRange: function(nowDate) {
return {
start: '2022-10-01',
end: '2022-11-15'
};
},
eventClick: function(info) {
alert('Event ID: ' + info.event.id);
},
expandRows: true,
slotMinTime: "08:00:00",
slotMaxTime: "15:00:00",
events: [
{
id: 10,
url: 'www.google.com',
title: 'cavallo a muzzo',
start: '2022-10-15 10:00',
end: '2022-10-15 11:00',
},
{
id: 11,
title: `salti acrobatici all'indietro`,
start: '2022-10-15 10:15',
end: '2022-10-15 11:15',
},
{
id: 12,
title: `tuffi carpiati tripli`,
start: '2022-10-14 10:15',
end: '2022-10-14 12:00',
}
]
});
calendar.render();
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.11.3/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.11.3/main.min.js"></script>
<div id='calendar'></div>
I have added events to my calendar from two sources. One source is a json object and other is a google calendar. Now, I want to make events from google calendar render as background events (nothing should happen if user clicks on it) and for json events I need to perform some action when user clicks on it.
This is my code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyACMTvM6xtGLSgkyLZqKw2t4chXf-tw8u8',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap', 'rrule', 'moment', 'googleCalendar'],
themeSystem: 'bootstrap',
timeZone: 'Asia/Colombo',
height: 'auto',
fixedWeekCount: false,
slotDuration: '00:15:00',
slotLabelInterval: '01:00:00',
navLinks: true,
nowIndicator: true,
selectable: true,
selectMirror: true,
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [1, 2, 3, 4, 5, 6], // Monday - saturday
startTime: '09:00', // a start time
endTime: '16:00', // an end time
},
views: {
listDay: {
buttonText: 'Todays events'
},
listWeek: {
buttonText: 'This week events'
},
listMonth: {
buttonText: 'This month events'
}
},
footer: {
center: 'listDay listWeek listMonth'
},
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
events: {!!$ce!!
},
color: 'blue',
editable: true
},
{
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
rendering: 'background',
color: 'yellow',
editable: false
}
],
select: function(info) {
alert('selected ' + info.startStr + ' to ' + info.endStr);
}
/* #can('isManager')
events: 'https://fullcalendar.io/demo-events.json'
#endcan */
});
calendar.render();
});
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 mb-5 mb-xl-0">
<div class="card bg-white shadow">
<div class="card-body">
<div id="calendar" style="height: 800px;"></div>
</div>
</div>
</div>
</div>
</div>
But my google calendar events don't show as background events.
I try to add ids for each event sources like below and it makes my entire calendar disappear:
eventSources: [
// your event source
{
id='a',
events:{!! $ce !!},
color: 'blue',
editable:true
},
{
id='b',
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
rendering: 'background',
color: 'yellow',
editable:false
}
],
Now I need at least a way to identify events from each source separately.
I also tried
info.event.source
and
info.event.source.id
and even
info.event.color
to use as my identifier, but info.event.source shows as an object and info.source.id, info.source.color show as undefined properties
also this is how I pass JSON to my laravel view from controller'
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\View\View
*/
public function index()
{
$calender_events = DB::table('calender_events')->get();
$ce = $calender_events->toJson();
return view('dashboard', compact('ce'));
}
}
Please help.
I found answer my self,
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyACMTvM6xtGLSgkyLZqKw2t4chXf-tw8u8',
plugins: [ 'dayGrid', 'timeGrid', 'list','interaction','bootstrap','rrule','moment','googleCalendar' ],
themeSystem: 'bootstrap',
timeZone: 'Asia/Colombo',
height: 'auto',
fixedWeekCount:false,
slotDuration: '00:15:00',
slotLabelInterval:'01:00:00',
navLinks:true,
nowIndicator: true,
selectable: true,
selectMirror:true,
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5, 6 ], // Monday - saturday
startTime: '09:00', // a start time
endTime: '16:00', // an end time
},
views: {
listDay: { buttonText: 'Todays events' },
listWeek: { buttonText: 'This week events' },
listMonth: { buttonText: 'This month events' }
},
footer:{
center: 'listDay listWeek listMonth'
},
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
events:{!! $ce !!},
id:'personal',
},
{
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
id:'google',
}
],
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if(info.event.source.id=='google'){
alert('Event: google ');
}else{
alert('Event: personal ');
}
},
});
calendar.render();
});
</script>
I just missed a comma near
googleCalendarId: 'en.lk#my#group.v.calendar.google.com',
id:'google',
and
events:{!! $ce !!},
id:'personal',
and for background rendering , full-calendar event source object doesn't have option "rendering" (only single events can render in background)
anyway thanks for your help!.
Using amcharts, I am plotting a chart with 3 kinds of data. But these two creates problem.
Job execution duration - The value actually should be in 'hh:mm'
format, for example 03:30 (can be read as 3 hours, 30 minutes)
Time of the day - The value should be in 'hh:mm' format, for example 08:30 (can be read as 8:30 am)
I tried, but i am not getting them working as expected(I want the axis values in above format). Here is my JSfiddle. Any suggestions/corrections would be highly appreciated!
code is under JS part : var chart = AmCharts.makeChart
Please find below code
return {
'type': 'serial',
'theme': 'light',
'marginTop': 0,
"autoMarginOffset": 20,
'marginRight': 80,
"mouseWheelZoomEnabled":true,
"legend": {
"align": "center",
"listeners": [ {
"event": "hideItem",
"method": this.legendHandler
}, {
"event": "showItem",
"method": this.legendHandler
} ]
},
'dataProvider': dataProvider,
'valueAxes': [{
"minimum": 0,
"axisColor":"#FFFFFF",
"titleColor":"#FFFFFF",
"color":"#FFFFFF",
"strictMinMax": true,
'axisAlpha': 0,
'position': 'left',
// "title":selectedParameter +" Level ("+type+")"
},
{
"logarithmic": true,
"dashLength": 1,
position: "left",
}
],
'graphs': graphlinelist,
'chartScrollbar': {
'graph': 'g1',
'gridAlpha': 0,
'color': '#888888',
'scrollbarHeight': 55,
'backgroundAlpha': 0,
'selectedBackgroundAlpha': 0.1,
'selectedBackgroundColor': '#888888',
'graphFillAlpha': 0,
'autoGridCount': true,
'selectedGraphFillAlpha': 0,
'graphLineAlpha': 0.2,
'graphLineColor': '#c2c2c2',
'selectedGraphLineColor': '#888888',
'selectedGraphLineAlpha': 1
},
'chartCursor': {
'categoryBalloonDateFormat': 'YYYY-MM-DD JJ:NN:SS',
'cursorAlpha': 0,
'valueLineEnabled': true,
'valueLineBalloonEnabled': true,
'valueLineAlpha': 0.5,
'fullWidth': true
},
'dataDateFormat': 'YYYY-MM-DD JJ:NN:SS',
'categoryField': 'Date',
'categoryAxis': {
'minPeriod': 'ss',
"labelColorField":"#FFFFFF",
'parseDates': true,
"axisColor":"#FFFFFF",
"titleColor":"#FFFFFF",
"color":"#FFFFFF",
'minorGridAlpha': 0.1,
"title": "Time(24 hours)",
'minorGridEnabled': true
},
'export': {
'enabled': true
}
};
}
You can either use 'dataDateFormat': 'YYYY-MM-DD JJ:NN:SS',
or
'dataDateFormat': 'NN:SS',
I'm making a view that shows the agenda for 12 people all on the same page. So, rather than individually coding 12 agendas with FullCalendar, how would I create a loop that runs 12 times and makes the 12 agendas?
This is how I want the format to be:
avail1.fullCalendar({
header: {
left: false,
center: false,
right: false,
},
height: 730,
slotMinutes: 30,
allDaySlot: false,
minTime: 6,
maxTime: '21:30',
defaultView: 'agendaDay',
});
This renders the agenda for the first person but I want it to do this 11 more times. All I want is for the loop to change the #1 in line 1: avail1.fullCalendar({ to change to 2, 3, 4, and all the way to 12.
If you need to see any more code just tell me thanks!
This should do it: (ERB template engine)
<% 12.times do |i| %>
avail<%= i+1 %>.fullCalendar({
header: {
left: false,
center: false,
right: false,
},
height: 730,
slotMinutes: 30,
allDaySlot: false,
minTime: 6,
maxTime: '21:30',
defaultView: 'agendaDay',
});
<% end %>
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.