This widget generates an "Add To Calendar" button, allowing users to add a custom event to a variety of calendars, including Google Calendar, Outlook, Yahoo Calendar, and more.
Extensive customization options provide full control of event details, which calendars to enable, button styling and dropdown styling.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Setup
Drag the widget from the library and drop into your project in Design mode.
Position the widget where you would like your button to appear. You may pin the button if you like as well.
Open the widget option panel.
Button Text displays the text seen on the button. Use the button sizing controls found in the Button Styling section to adjust button size if needed for extensive button text.
The checkboxes below the Button Text field allow you to enable various calendar applications.
EVENT SETUP SECTION
This section allows you to enter all of the details of your event. These details will populate the fields for the event in the various calendars. The widget panel options in this section are very straight forward.
The "Hour" setting in the Event Start Date and Event End Date areas uses 24 hour format. For example, a setting of 18 is equal to 6pm.
BUTTON STYLING SECTION
This section allows for the styling of the Add To Calendar button. The styling settings here are similar to the styling settings found in other MuseThemes widgets.
Please note the following:
You may use any font you like for the button, but be sure that the font is also used elsewhere on the page so that it is loaded properly by the browser.
By default, the button border is not enabled. To add a border, increase the Button Border Width setting to 1 or greater.
To create a border button, set the Button Border Width to 1 or greater, as described above, and match the Text Color to the Button Border Color. If you wish to have a transparent inner button area, set the Button Opacity to 0 (zero).
For a text-only link, set the button text settings as you wish, and set the Button Opacity and Button Border Opacity settings to 0 (zero).
While it is possible to create a round button by using a large Button Radius value, we advise against this. The calendar application selection dropdown's width is based on the portion of the button's width that does not have radius applied to it. This means that the dropdown for a round button would be unusable due to being too narrow.
DROPDOWN STYLING
This section provides the styling options for the calendar application selection dropdown. These settings are similar to the Button Styling section above, as well as the special notes listed above.