Zum Hauptinhalt springen

addCalendarEventSource

The addCalendarEventSource() method allows you to add events to a calendar control from various sources. You can customize how these events appear by defining colors, text formatting, and other visual attributes. This function is particularly useful for displaying events from multiple sources in different colors on the same calendar.

Parameters​

  1. controlId (string) - The ID of the calendar control
  2. eventSource (object) - The event source object that contains the events and their appearance settings

Event Source Object Properties​

The event source object can contain the following properties:

  • events (array) - Array of event objects or a function that dynamically loads events
  • id (string/number) - A unique identifier for this event source
  • color (string) - Background color for events from this source
  • textColor (string) - Text color for events from this source
  • borderColor (string) - Border color for events from this source
  • className (string/array) - Additional CSS class(es) for styling events

Event Object Properties​

Each event in the events array can have the following properties:

  • title (string) - The text that appears on the event
  • start (string) - Start date/time of the event in ISO8601 format ('YYYY-MM-DD' or 'YYYY-MM-DDTHH:mm:ss')
  • end (string) - End date/time of the event (optional)
  • allDay (boolean) - Whether the event occurs all day (optional)
  • id (string/number) - Unique identifier for the event (optional)
  • color (string) - Individual event background color (optional)
  • url (string) - URL that will be visited when this event is clicked (optional)

Example Usages​

Basic Event Source​

app.addCalendarEventSource("calendarId", {
   events: [
      {
         title: 'Team Meeting',
         start: '2025-04-16T10:00:00',
         end: '2025-04-16T11:30:00'
      },
      {
         title: 'Project Deadline',
         start: '2025-04-20',
         allDay: true
      }
   ],
   id: 'team-events',
   color: '#3788d8',
   textColor: 'white'
});

Multiple Event Sources with Different Colors​

// Add company events in blue
app.addCalendarEventSource("calendarId", {
   events: [
      {
         title: 'Company Meeting',
         start: '2025-04-17',
         allDay: true
      }
   ],
   id: 'company-events',
   color: 'blue',
   textColor: 'white'
});

// Add personal events in green
app.addCalendarEventSource("calendarId", {
   events: [
      {
         title: 'Dentist Appointment',
         start: '2025-04-18T14:00:00',
         end: '2025-04-18T15:00:00'
      }
   ],
   id: 'personal-events',
   color: 'green',
   textColor: 'white'
});

Function-based Event Source​

app.addCalendarEventSource("calendarId", {
   events: function(fetchInfo, successCallback, failureCallback) {
      // fetchInfo contains start and end dates for the current view
      const startDate = fetchInfo.start.toISOString();
      const endDate = fetchInfo.end.toISOString();
      
      // Load events for the date range from an API
      app.sqlRead("GetEventsInRange", {
         startDate: startDate,
         endDate: endDate
      }).then(function(events) {
         // Transform database results to calendar events
         const calendarEvents = events.map(event => ({
            title: event.title,
            start: event.startTime,
            end: event.endTime,
            id: event.id
         }));
         
         successCallback(calendarEvents);
      }).catch(function(error) {
         failureCallback(error);
      });
   },
   id: 'dynamic-events',
   color: 'purple'
});

JSON Feed Source​

app.addCalendarEventSource("calendarId", {
   url: 'https://my-api.example.com/events',
   method: 'GET',
   extraParams: {
      userId: 123,
      filter: 'upcoming'
   },
   id: 'api-events',
   color: 'orange'
});

Notes​

  • Adding multiple event sources with the same ID will replace the existing source
  • The calendar needs to be initialized before adding event sources
  • Color values can be any valid CSS color (hex codes, RGB values, or color names)
  • This function does not return any value

References​