Skip to main content
After a guest successfully RSVPs, a thank-you modal appears containing an “Add to Calendar” widget. The widget is generated by ouical.js (bundled in js/vendor/ouical.js) and supports Google Calendar, Apple Calendar, Outlook, and Yahoo Calendar.

​
The createCalendar() call

The calendar widget is configured in js/scripts.js using the createCalendar() function provided by js/vendor/ouical.js:
js/scripts.js
var myCalendar = createCalendar({
    options: {
        class: '',
        // You can pass an ID. If you don't, one will be generated for you
        id: ''
    },
    data: {
        // Event title
        title: "Ram and Antara's Wedding",

        // Event start date
        start: new Date('Nov 27, 2017 10:00'),

        // Event duration (IN MINUTES)
        // duration: 120,

        // You can also choose to set an end time
        // If an end time is set, this will take precedence over duration
        end: new Date('Nov 29, 2017 00:00'),

        // Event Address
        address: 'ITC Fortune Park Hotel, Kolkata',

        // Event Description
        description: "We can't wait to see you on our big day. For any queries or issues, please contact Mr. Amit Roy at +91 9876543210."
    }
});

$('#add-to-cal').html(myCalendar);
The return value is an HTML string containing calendar buttons, which is injected into #add-to-cal inside the RSVP success modal.

​
Field reference

​
data.title
string
required
The event title that appears in the guest’s calendar. Update this to your own names:
title: "Ram and Antara's Wedding"
​
data.start
Date
required
The event start date and time as a JavaScript Date object. The format new Date('Nov 27, 2017 10:00') is human-readable and reliable across browsers. Update to your wedding start date:
start: new Date('Nov 27, 2017 10:00')
​
data.end
Date
The event end date and time. Takes precedence over duration if both are set. The example spans two days to encompass the full wedding weekend:
end: new Date('Nov 29, 2017 00:00')
​
data.address
string
The venue address shown in the calendar event. Update to your own venue:
address: 'ITC Fortune Park Hotel, Kolkata'
​
data.description
string
A longer description included in the calendar event body. Good place for a contact name and phone number:
description: "We can't wait to see you on our big day. For any queries or issues, please contact Mr. Amit Roy at +91 9876543210."

​
Supported calendar providers

The ouical.js library generates separate links for four calendar providers. Guests see all four options and can choose the one matching their calendar app:
ProviderHow it works
Google CalendarOpens a pre-filled Google Calendar event creation URL
Apple CalendarDownloads an .ics file that opens in Apple Calendar or any iCal-compatible app
OutlookDownloads an .ics file compatible with Outlook
Yahoo CalendarOpens a pre-filled Yahoo Calendar event creation URL
ouical.js is loaded in index.html before the main scripts:
index.html
<script src="js/vendor/ouical.js"></script>
<script src="js/scripts.min.js"></script>

​
RSVP success modal

The #add-to-cal div lives inside the RSVP thank-you modal:
index.html
<div id="rsvp-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
                <div class="section-padding">
                    <h3>Thank you!</h3>
                    <p>We are glad to see you join us on our big day.</p>
                    <div id="add-to-cal"></div>
                </div>
            </div>
        </div>
    </div>
</div>
Update the <h3> and <p> text to personalize the thank-you message. The #add-to-cal div is populated dynamically when the page loads via $('#add-to-cal').html(myCalendar).
The “Add to Calendar” widget appears only inside the thank-you modal, which is shown after a successful RSVP form submission. Guests who do not RSVP through the website will not see the calendar buttons. The modal is triggered in the RSVP form’s .done callback:
js/scripts.js
.done(function (data) {
    if (data.result === "error") {
        $('#alert-wrapper').html(alert_markup('danger', data.message));
    } else {
        $('#alert-wrapper').html('');
        $('#rsvp-modal').modal('show');
    }
})

Build docs developers (and LLMs) love

Get started for freeTalk to us