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.
Related
I am using FullCalendar and iCalendar2FullCalendar to feed in the .ICS files from our various iCloud accounts. This works great at rendering all the events from our shared calendars.
I’m making a small display and am using the ‘agendaDay’ view. I like that all day events sit at the top and can see any scheduling conflicts below.
However, I have some events that run over a number of days, for example from 1700hrs Friday to 1900hrs Sunday my daughter will be with me. On the agendaDay view this will show as a solid bar throughout all of saturday across each hour, and I’m wondering if there is a way to render events over a certain duration as an all day event instead?
I’ve played with the eventRender callback but whilst I’m able to change the event properties the event still renders as if the changes were never made.
Here’s my code, in this revision i’ve applied a fixed date in the hope it would draw as an all day event but no luck!:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: false,
aspectRatio: 0.77,
eventRender: function(event, element, view) {
var dur = event.end - event.start; //event duration
var days = dur / 86400000;
if(days > 1 || event.end == null){ // needs altering to show as all day event.
console.log('long event - all day?' + event.allDay);
event.allDay = true;
console.log(event.title + ' - all day?' + event.allDay);
console.log(event.title + ' - starts:' + EpochToDate(event.start));
console.log(event.title + ' - ends:' + EpochToDate(event.end));
event.start = '2018-07-23T10:00:00';
event.end = '2018-07-24T10:00:00';
console.log (event);
}
}
});
})
Here’s what I used in the end, thanks to #ADyson.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: false,
aspectRatio: 0.77,
eventDataTransform: function (eventData) {
var dur = eventData.end - eventData.start; //total event duration
if(dur >= 18000000 || eventData.end == null){ // 5 hours
eventData.allDay = true;
//eventData.end needs ammending to 00:00:00 of the next morning
if (dur > 86400000) {
var m = moment(eventData.end);
var roundDown = m.startOf('day');
var day2 = moment(roundDown).add(1, 'days')
eventData.end = day2.toString();
}
}
return(eventData);
},
});
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.
In chrome it works perfectly fine.
In Firefox, when I click in middle of slot, it works fine. But When I click at end of slot, it take next date.
For reference I have recorded video which will give problem insights --
https://youtu.be/QBwyR-xn_tw
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next, today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
lazyFetching: true,
allDayDefault: false,
disableResizing: true,
editable: true,
dragScroll: true,
defaultView: 'agendaWeek',
slotMinutes: 15,
slotDuration: '00:15:00',
allDaySlot: false,
minDate: 0,
minTime: 9,
maxTime: 23,
firstHour: currentHour,
axisFormat: 'htt { - htt}',
dayClick: function (date, allDay, jsEvent, view) {
var mdate = new Date(date);
alert(mdate);
exit;
Here when I do alert in Google Chrome in any part of slot it works perfectly fine and give me correct date in which I have clicked.
But in firefox, when I click at end of slot it give me next date while I click in middle of slot, it gives correct date.
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,
});
});