Datebook

The CalendarRecurrence object defines the repetition pattern for an event. Recurrence is optional. Note that this feature is not supported in Yahoo or Outlook online calendars.

Key properties include:

• frequency: The base unit of recurrence.
• interval: The multiplier for the frequency.
• count: The maximum number of occurrences.
• end: A Date object representing the latest possible occurrence.
• weekdays: Specific days of the week for the event to occur.
• monthdays: Specific days of the month for the event to occur.
• weekstart: The day of the week that denotes the start of a week.

To use Datebook in your project, install it using your preferred package manager:

yarn add datebook

The generator component allows users to create calendar event links or downloadable .ics files through a web form. It is designed to be used within a <ClientOnly> wrapper to ensure it only renders in the browser environment, preventing hydration mismatches in frameworks like Astro or Next.js.

<ClientOnly>
  <generator />
</ClientOnly>

To add Datebook to your project, use the following command:

yarn add datebook

Install the datebook package using yarn to start adding events to calendar apps.

yarn add datebook

To allow users to download the generated calendar, render the content to a string, wrap it in a Blob with the text/calendar type, and use a library like file-saver to trigger the download.

import * as FileSaver from 'file-saver'

const ics = calendar.render()
const blob = new Blob([ics], {
  type: 'text/calendar'
})

FileSaver.saveAs(blob, 'my-calendar-event.ics')

For projects not using a module bundler, you can include Datebook directly in your HTML using a CDN like jsDelivr. When using the script tag, the classes are available under the global datebook namespace.

<!doctype html>
<html
  <head>
    <script src="https://cdn.jsdelivr.net/npm/datebook/dist/datebook.min.js"></script>
  </head>
  <body
    <script>
      const googleCalendar = new datebook.GoogleCalendar({
        title: 'Happy Hour',
        location: 'The Bar, New York, NY',
        description: 'Let\'s blow off some steam with a tall cold one!',
        start: new Date('2022-07-08T19:00:00'),
        end: new Date('2022-07-08T23:30:00'),
        recurrence: {
          frequency: 'WEEKLY',
          interval: 2
        }
      })

      window.location.href = googleCalendar.render()
    </script>
  </body>
</html>

When creating or configuring an event in Datebook, you can provide several basic metadata fields. Note the following behaviors for string fields:

• title: Line breaks are automatically stripped.
• description: Line breaks are automatically converted to \n.
• location: Line breaks are automatically stripped.

Every event requires a start timestamp. The end timestamp is also required unless the event is an all-day event, in which case the end field should be omitted.

• start: Type Date. Required.
• end: Type Date. Required (except for all-day events).

You can specify when an event should repeat using the recurrence property. This property accepts a CalendarRecurrence object.

Warning: Recurrence is not supported in Yahoo or Outlook online calendars.