How to plot Google Calendar–like API response (recurring events, exceptions) on a custom...

I’m currently building a backend-first calendar scheduling system (like Google Calendar), and I'm working with the following type of event data returned from my API:

It includes recurring events (RRULE), all-day events (start.date), time-specific events (start.dateTime), and exception instances (e.g. cancelled occurrences of a recurring event).

I am going to replicate the response same as a google calendar api reponse.

Here's a sample of Google API response:

json Copy Edit it

{
"kind": "calendar#event",
"etag": "\"3503602610079486\"",
"id": "6butbk1c770g1pnp4fnn2sokbd",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=NmJ1dGJrMWM3NzBnMXBucDRmbm4yc29rYmRfMjAyNTA3MDYgZ2FnYW9xcGhzQG0",
"created": "2025-07-06T11:24:59.000Z",
"updated": "2025-07-06T11:28:25.039Z",
"summary": "Event Daily All Day Event",
"creator": {
"email": "gagaoqphs@gmail.com",
"self": true
},
"organizer": {
"email": "gagaoqphs@gmail.com",
"self": true
},
"start": {
"date": "2025-07-06"
},
"end": {
"date": "2025-07-07"
},
"recurrence": [
"RRULE:FREQ=DAILY"
],
"transparency": "transparent",
"iCalUID": "6butbk1c770g1pnp4fnn2sokbd@google.com",
"sequence": 0,
"reminders": {
"useDefault": false
},
"eventType": "default"
},
{
"kind": "calendar#event",
"etag": "\"3503602610079486\"",
"id": "6butbk1c770g1pnp4fnn2sokbd_20250708",
"status": "cancelled",
"htmlLink": "https://www.google.com/calendar/event?eid=NmJ1dGJrMWM3NzBnMXBucDRmbm4yc29rYmRfMjAyNTA3MDggZ2FnYW9xcGhzQG0",
"created": "2025-07-06T11:24:59.000Z",
"updated": "2025-07-06T11:28:25.039Z",
"summary": "Event Daily All Day Event",
"creator": {
"email": "gagaoqphs@gmail.com",
"self": true
},
"organizer": {
"email": "gagaoqphs@gmail.com",
"self": true
},
"start": {
"date": "2025-07-08"
},
"end": {
"date": "2025-07-09"
},
"recurringEventId": "6butbk1c770g1pnp4fnn2sokbd",
"originalStartTime": {
"date": "2025-07-08"
},
"transparency": "transparent",
"iCalUID": "6butbk1c770g1pnp4fnn2sokbd@google.com",
"sequence": 1,
"reminders": {
"useDefault": false
},
"eventType": "default"
},
{
"kind": "calendar#event",
"etag": "\"3503602744428542\"",
"id": "10rll18oedfpa2nbh6hrf6ragb",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=MTBybGwxOG9lZGZwYTJuYmg2aHJmNnJhZ2IgZ2FnYW9xcGhzQG0",
"created": "2025-07-06T11:29:32.000Z",
"updated": "2025-07-06T11:29:32.214Z",
"summary": "Test ",
"creator": {
"email": "gagaoqphs@gmail.com",
"self": true
},
"organizer": {
"email": "gagaoqphs@gmail.com",
"self": true
},
"start": {
"dateTime": "2025-07-08T07:30:00Z",
"timeZone": "UTC"
},
"end": {
"dateTime": "2025-07-08T08:30:00Z",
"timeZone": "UTC"
},
"iCalUID": "10rll18oedfpa2nbh6hrf6ragb@google.com",
"sequence": 0,
"reminders": {
"useDefault": true
},
"eventType": "default"
},
{
"kind": "calendar#event",
"etag": "\"3503603073450078\"",
"id": "6ldsh849d28crn0fl5kl9ne35o",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=Nmxkc2g4NDlkMjhjcm4wZmw1a2w5bmUzNW9fMjAyNTA3MDZUMjAzMDAwWiBnYWdhb3FwaHNAbQ",
"created": "2025-07-06T11:32:16.000Z",
"updated": "2025-07-06T11:32:16.725Z",
"creator": {
"email": "gagaoqphs@gmail.com",
"self": true
},
"organizer": {
"email": "gagaoqphs@gmail.com",
"self": true
},
"start": {
"dateTime": "2025-07-06T20:30:00Z",
"timeZone": "UTC"
},
"end": {
"dateTime": "2025-07-06T20:45:00Z",
"timeZone": "UTC"
},
"recurrence": [
"RRULE:FREQ=WEEKLY;WKST=SU;BYDAY=SU"
],
"iCalUID": "6ldsh849d28crn0fl5kl9ne35o@google.com",
"sequence": 0,
"reminders": {
"useDefault": true
},
"eventType": "default"
}

Continue reading...