I'm using the FullCalendar Angular version with a .net core backend.
I am using the event stream and it is bringing back the events nicely whenever I change dates etc.
But the events are not rendering on the calender.
This is the output from my api:
[{"id":"83220","title":"Tiffany in Office","start":"2022/12/12 09:30 AM","end":"2022/12/12 10:00 AM"},
{"id":"83338","title":"Jamed","start":"2022/12/12 02:00 PM","end":"2022/12/12 03:00 PM"},
{"id":"83465","title":"IAG in Office","start":"2022/12/12 11:30 AM","end":"2022/12/12 12:30 PM"}]
And these are my calendar options:
smallCalendarOptions: CalendarOptions = {
initialView: 'timeGridDay',
height: '100%',
allDaySlot: true,
displayEventTime: true,
nowIndicator: true,
events: this.loadSmallEvents.bind(this)
};
I'm on Angular 13 using FullCalendar 5.11.3 with daygrid, interaction and timegrid installed.
Related
I'm looking for a calendar that allow me schedule events for all semesters, weeks of semesters,cycle of years and seasons.
As suggested from the Github of Toast Ui, they said to look on full calendar TyperScript.
https://github.com/fullcalendar/fullcalendar/issues/6622
but the bot say to ask here so i'm here, there is some easy way to do what i'm trying to achieve, this is a project for a school so this is why i'm trying to get abstract calendar instead of normal calendar.
My goal is to do a Calendar to schedule event and then push to our LMS, our planing, but our staff use abstract date e.g(Semesters,Season,Cycle of Years) i asked to some devs and they put me on the direction of fullcalendar app coded in JavaScript, but when i display this i have this result.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridFourDay,dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
views: {
timeGridFourDay: {
type: 'dayGridMonth',
duration: { week: 15 },
buttonText: 'Semeters',
weekNumbers: true }
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
nowIndicator: true,
weekNumbers: true,
weekNumberCalculation: 'ISO',
editable: true,
selectable: true,
dayMaxEvents: true,
but when i try day: 75 it only output me some weeks and not 75 days = 15 Week = 1 Semester
What i want is to display 15 Weeks but in this view type .
I have chosen an 'dayGrid' view, wish allow me to view full weeks for 15Weeks thorught the similar month grid.
I am trying to show visibleRange from 2017-08-15 to 2017-09-03, but on the calendar show's range: 27, 28, 29, 30, 31, 1, 2. Missing half of the days from the range. But if I set range from 2017-08-10 to 2017-09-01, shows all date's inside the range.
Here is the image from the range 2017-08-15 to 2017-09-03
Here is the code I used:
$("#calendar").fullCalendar({
defaultView: 'month',
fixedWeekCount: true,
selectable: true,
visibleRange: {
start: '2017-08-15',
end: '2017-09-03'
},
validRange: {
start: '2017-08-15',
end: '2017-09-03'
},
disableDragging: true,
editable: true,
events: [
{
title : '55.000 Qmiles',
start : '2017-10-13'
},
{
title : '55.000 Qmiles',
start : '2018-04-08'
}
]
});
The reason why I need this is to create a 15-days calendar, when you click NEXT it will show next 15 days instead of the full next month. visibleRange is the way i found it could work, but I got this "bug" since sometimes the range will not show all days.
I am trying to change day start time in fullcalendar without cutting any hours of the day in agendaWeek and agendaDay views
what I am doing is :
$('#calendar').fullCalendar({
minTime: "08:00:00" //8am
});
but the hours between 00:00 - 8:00 are not showing at all in the calendar view
I tried to do
$('#calendar').fullCalendar({
minTime: "08:00:00", //8am
maxTime: "07:00:00" //7am
});
but this config is showing nothing.
am I missing something ?or is it something in the fullcalendar's implementation where minTime and maxTime options have specific range of values ?
here is a fiddle
I needed this functionality myself so I implemented a dayBreakTime option in my fork: https://github.com/matiaslarsson/fullcalendar
This will allow you to select at what time the calendar columns will break for a new day. Just add the option dayBreakTime: "08:00:00" to make the day columns span from 08:00 to 08:00 the next day, like this;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
dayBreakTime: "08:00:00",
...
});
Please check the documentation and star the issue at https://code.google.com/p/fullcalendar/issues/detail?id=2541 if you'd like the functionality in the main FullCalendar branch.
FullCalendar accepts time in 00:00:00 to 23:59:59 format and in your case, it doesn't work because your maxTime is lesser than minTime. You need to change your maxTime to
maxTime: "19:00:00"
When using isRTL : true
shouldn't the week and day view - hours column - display on the right side ?
i'm using it like that
$(document).ready(function () {
flag = !1;
$("#Xcalendar").fullCalendar({
theme: !0,
isRTL : true,
header: { left: "next,prev today", center: "title", right: "month,agendaWeek,agendaDay" },
I'm using version 1.5
I have tested in my calendar and the month view is displayed Rigt to Left but the week and day view are displayed in the default way LTR...
I am using the 1.6 version, so i guess its suposed to be like that...
Hi I was just wondering if there's a way to make the "title, start, end" invisible on the calendar for an event. Reason so is I would like to implement the qtip to show these information when they hover over the event. I'm using the most updated version of fullcalendar which is from this file: "fullcalendar-1.4.6.zip" with C# as serverside and jQuery as clientside. Thank you all for looking.
I have a very similar requirement (show tooltip on hover) and i had to remove the start and end time from the event's header. I have done it as below. The magic gets done by the timeFormat: {....} option block ():
timeFormat: {
// for agendaWeek and agendaDay do not display time in title
// time already displayed in the views
agenda: '',
// for all other views (19:00 - 20:30)
'': 'H:mm{ - H:mm}'
},
Note that I am using agenda views, and I remove the time components only for the week and the day views.
NOTE: As per my requirements, I did not have to remove the event-title. Question to you.... what would you display as the event header, if not the time AND the title? Would an empty header look a bit odd? Anyways.... let me know if you have any further issues.
Sample screen shot link: alt text http://img441.imageshack.us/img441/9587/calendarview.jpg.
A sample snippet of what options I had used:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
timeFormat: {
// for agendaWeek and agendaDay do not display time in title
// time already displayed in the view
agenda: '',
// for all other views (19:00 - 20:30)
'': 'H:mm{ - H:mm}'
},
columnFormat: {
month: 'dddd', // Monday
week: 'dddd, MMM dS', // Monday, July 13th
day: 'dddd, MMM dS' // Monday, July 13th
},
axisFormat: 'H:mm',
allDaySlot: false,
slotMinutes: 30,
defaultEventMinutes: 22,
editable: false,
aspectRatio: 2,
});
});