Extend Ionic2-Calender to display recurring events. #682
Conversation
moment-recur-ts is used to calculate the recurring events.
The IEvent model has been extended by 3 attributes:
rruleFreq: Rule.MeasureInput It can be days, weeks, months, daysOfWeek, monthsOfYear
rruleInterval: Rule.UnitsInput:
It can be a number: every N days or every N weeks.
It can be an array of number [2,3]
It can be an array of strings ['mon','wed']
See more in https://jefbarn.github.io/moment-recur-ts/
rruleUntil: Date The last date the event is recurring.
A new function getEventOccurences has been introduced in CalendarServices. This returns all occurrences of an event in the period between utcStartTime and utcEndTime
The onDataLoaded function has been adapted in dayview weekview and monthview so that they use the getEventOccurences function.
src/calendar.service.ts
Outdated
| let time = utcStartTime + 1 | ||
| let oneDay = 86400000 | ||
| let recurrence = moment(event.startTime.getDate()).recur().every(event.rruleInterval, event.rruleFreq) | ||
| while (time < utcEndTime + 1) { |
There was a problem hiding this comment.
I think it's better to use the moment-rs built-in function to generate the dates.
With both a start date and an end date set, you can generate all dates within that range that match the pattern (including the start/end dates).
let recurrence = moment()
.recur('01/01/2014', '01/07/2014')
.every(2)
.days()
// Outputs: ["01/01/2014", "01/03/2014", "01/05/2014", "01/07/2014"]
allDates = recurrence.all('L')
| if(event.rruleUntil && event.rruleUntil.getTime() < utcStartTime ){ | ||
| return occurences; | ||
| } | ||
| for( let match of moment(event.startTime.getDate()).recur(utcStartTime,utcEndTime).every(event.rruleInterval, event.rruleFreq).all('L') ){ |
There was a problem hiding this comment.
this seems not correct, the range should be
moment().recur(max(utcStartTime, event.startTime.getDate(), min(utcEndTime, event.rruleUntil.getDate())).every(xxxxx)
Also instead of introducing a separate rruleUntil field on IEvent, could we just leverage the existing endTime field? Basically startTime and endTime field determine the total period of recurring event, rruleFreq and rruleInterval determine what's the pattern of the recurring event.
There was a problem hiding this comment.
could you fix this logic? utcStartTime and utcEndTime is the range, for example, month start and month end. But the recurring event could start and end in the middle of the month. So it should be like this:
moment().recur(max(utcStartTime, event.startTime.getDate()), min(utcEndTime, event.rruleUntil.getDate())).every(xxxxx)
| export interface IEvent { | ||
| allDay: boolean; | ||
| endTime: Date; | ||
| startTime: Date; | ||
| title: string; | ||
| category?: string; | ||
| rruleFreq?: Rule.MeasureInput; | ||
| rruleInterval?: Rule.UnitsInput; | ||
| rruleUntil?: Date; |
There was a problem hiding this comment.
Instead of introducing a separate rruleUntil field on IEvent, could we just leverage the existing endTime field? Basically startTime and endTime field determine the total period of recurring event, rruleFreq and rruleInterval determine what's the pattern of the recurring event.
There was a problem hiding this comment.
I do not think it is a good idea. startTime and endTime determinates the start and end time of the event.
By recurring events only the time counts not the date.
If I want to create a recurring event for all thusday 13:00 - 14:00 until 2/11/2025 I need all 3 fields: startTime endTime and rruleUntil also. Only for allDay == true events can you ignore endTime
There was a problem hiding this comment.
if endTime is needed, maybe I didn't get the logic in below code. eventUTCEndTime is only set based on eventUTCStartTime.
eventUTCEndTime: eventUTCStartTime + 86400000
for( let match of moment(event.startTime.getDate()).recur(utcStartTime,utcEndTime).every(event.rruleInterval, event.rruleFreq).all('L') ){
let matchDate = new Date(match)
let eventUTCStartTime = Date.UTC(matchDate.getFullYear(), matchDate.getMonth(), matchDate.getDate())
occurences.push({
eventUTCStartTime: eventUTCStartTime,
eventUTCEndTime: eventUTCStartTime + 86400000
})
}
There was a problem hiding this comment.
moment(eventTime).recure(start,end) delivers the list of dates when an event recures.
So eventUTCStartTime is not the start time of the event but the start time of the day on which the event happens. That is why I've selected as eventUTCEndTime the end time of this day. May be adding 86399999 is correct. ( I'm a chemist not a mathematician :-)
moment-recur-ts is used to calculate the recurring events.
The IEvent model has been extended by 3 attributes:
rruleFreq: Rule.MeasureInput It can be days, weeks, months, daysOfWeek, monthsOfYear
rruleInterval: Rule.UnitsInput:
It can be a number: every N days or every N weeks.
It can be an array of numbers [2,3]
It can be an array of strings ['mon','wed']
See more in https://jefbarn.github.io/moment-recur-ts/
rruleUntil: Date The last date the event is recurring.
A new function getEventOccurences has been introduced in CalendarServices. This returns all occurrences of an event in the period between utcStartTime and utcEndTime
The onDataLoaded function has been adapted in dayview weekview and monthview so that they use the getEventOccurences function.