diff --git a/README.md b/README.md index 5d6f1d2..aa1af20 100644 --- a/README.md +++ b/README.md @@ -7,15 +7,29 @@ A date & schedule library to use for advanced calendars in TypeScript and JS. - [Download JS](umd/dayspan.js) - Install via `bower install dayspan` or `npm install dayspan` +### Features + +- Schedules track how frequent events occur using 20+ properties +- Events can last minutes, hours, days, or weeks +- Events can occur all day, or 1 or more times during the day +- Events can have any day & time included as an event occurrence (they don't need to match the frequency of the schedule) +- Events can be excluded, cancelled, or have metadata (specific event occurrence, all in a given day, week, month, quarter, or year) +- Event occurrences can be moved +- Calendars can represent a span of days, weeks, months, or years +- Easily list the next/previous days that occur on a schedule +- Describe a schedule in a human friendly string +- Export and import schedules and calendars to plain objects for easy saving and loading +- Provides logic to help display intersecting events on a calendar + ### TypeScript Example ```typescript -// A monthly calendar around today -let cal = Calendar.months(); +// A monthly calendar around today (string=event data type, any=schedule metadata type) +let cal = Calendar.months(); // Every Monday 9:00 - 9:30 -cal.addSchedule({ - event: 'Weekly Meeting', +cal.addEvent({ + data: 'Weekly Meeting', schedule: { dayOfWeek: [Weekday.MONDAY], times: [9], @@ -25,16 +39,18 @@ cal.addSchedule({ }); // Dr. Appointment on 01/04/2018 -cal.addSchedule({ - event: 'Dr. Appointment', - schedule: new Schedule({ +cal.addEvent({ + data: 'Dr. Appointment', + visible: false, + schedule: { on: Day.build(2018, Month.APRIL, 1) - }) + } }); // Mother's Day -cal.addSchedule({ - event: "Mother's Day", +cal.addEvent({ + id: 'someUserProvidedId', + data: "Mother's Day", schedule: new Schedule({ weekspanOfMonth: [1], // 2nd dayOfWeek: [Weekday.SUNDAY], // Sunday @@ -52,16 +68,16 @@ cal.next(); cal.select(Day.build(2018, Month.APRIL, 12)); // Remove the schedule -cal.removeSchedule('Weekly Meeting'); +cal.removeEvent('Weekly Meeting'); // A weekly calendar with custom MyEvent class -Calendar.weeks(); +Calendar.weeks(); // A daily calendar covering 3 days centered on today -Calendar.days(3); +Calendar.days(3); // A daily calendar covering 3 days starting with given date -Calendar.days(3, Day.build(2018, Month.JUNE, 15), 0); +Calendar.days(3, Day.build(2018, Month.JUNE, 15), 0); ``` ### JS Example @@ -73,8 +89,8 @@ You just need to append `ds` to the beginning of the classes: var cal = ds.Calendar.months(); // Every Monday 9:00 - 9:30 -cal.addSchedule({ - event: 'Weekly Meeting', +cal.addEvent({ + data: 'Weekly Meeting', schedule: { dayOfWeek: [ds.Weekday.MONDAY], times: [9], @@ -84,8 +100,8 @@ cal.addSchedule({ }); // Dr. Appointment on 01/04/2018 -cal.addSchedule({ - event: 'Dr. Appointment', +cal.addEvent({ + data: 'Dr. Appointment', schedule: new ds.Schedule({ on: ds.Day.build(2018, ds.Month.APRIL, 1) }) diff --git a/examples/google/index.html b/examples/google/index.html index 861d039..3d3a8ca 100644 --- a/examples/google/index.html +++ b/examples/google/index.html @@ -12,6 +12,12 @@ + +
@@ -129,7 +135,9 @@

+ @exclude="eventRemoveOccurrence" + @cancel="eventCancel" + @move="eventMove"> @@ -142,7 +150,7 @@

- + clear Cancel event changes @@ -157,7 +165,7 @@

Save - + More actions... @@ -168,6 +176,12 @@

Remove this occurrence + + Cancel this occurrence + + + Undo cancellation + @@ -335,9 +349,9 @@

- {{ d.format('ddd MMM Do YYYY') }} + {{ describeExclusion( d ) }} @@ -459,10 +473,10 @@

@@ -480,11 +494,11 @@

@@ -552,7 +566,7 @@