AddEvent generates a 'version 2' formatted .ics file. So in addition to the event title and date, you can also supply a description, location and web address. In newer calendar software (like iCal) locations are automatically presented with a map pin and optional directions. A user can set a reminder and sync the event across all their devices.
This is what an event generated by AddEvent looks like, when you add it to an iCal calendar:
Unlike the former 'AddThisEvent' stack, this new stack has no dependencies on third-party websites or services. You do not need to buy an expensive license or endure a complicated process of registering each website you want to use the stack on. Instead, AddEvent uses some clever PHP code to take your event details and convert them into a downloadable .ics file.
It's perfectly feasible to use multiple AddEvent stacks on the same webpage. It is possible to create an event that will span several days (like a sporting fixture or concert). The extension of the webpage can remain as .html but you must run the stack on a web server that has a minimum of PHP 5.6 or greater. Stacks 3 or later is required.
This is what an event generated by AddEvent looks like, when you add it to an iCal calendar:
Unlike the former 'AddThisEvent' stack, this new stack has no dependencies on third-party websites or services. You do not need to buy an expensive license or endure a complicated process of registering each website you want to use the stack on. Instead, AddEvent uses some clever PHP code to take your event details and convert them into a downloadable .ics file.
It's perfectly feasible to use multiple AddEvent stacks on the same webpage. It is possible to create an event that will span several days (like a sporting fixture or concert). The extension of the webpage can remain as .html but you must run the stack on a web server that has a minimum of PHP 5.6 or greater. Stacks 3 or later is required.
Example
This is a working example of the AddEvent stack. Click the 'add to calendar' button...This is a second example, set to a year later. Custom button styling has been applied to change the appearance of the button (please read the details below to see how this can be accomplished):
Setup
Follow these instructions to setup Add Event:1 Open the Stacks Library. Find AddEvent. Drag and drop a copy of the stack into your webpage.
2 Select the stack in edit mode. Configure the details for the event, in the stack settings.
3 Export or publish the page to a web server with PHP 7.1 or greater. This stack does not work correctly in RapidWeaver preview.
4 Click the download button to test.
The date and time you set is synchronised with your web server clock. So as an example, if you set a time of 2.00PM and the web server is running in the New York timezone, then the time shown to someone in New York will be 2.00PM. However for a person elsewhere in the world (in a different timezone), the time will instead get converted to their local timezone. If you test the stack and find that your events are beginning or ending at the wrong time, then there is a good chance your server is running in a different timezone. In which case, you can login to your control panel to adjust the timezone setting (or stipulate a new one in the .htaccess file) or ask your web hosting company to do it for you. There is also a custom timezone setting in the stack, although this is not compatible universally with all hosting companies.
When a user downloads the .ics file, they simply have to double-click it to install in their preferred calendar app. Events are not added automatically for security reasons - and because it may be a users personal preference to change which app or calendar the event is added to. The file name of the download can be customised, but it must be in a web safe format; to mean letters and numbers only, no spaces or special characters (other than hyphens or underscores).
Changing the button style
AddEvent was intended to be used in ThemeFlood themes, therefore we use the Bootstrap 'classes' naming convention for buttons. A class ofbtn btn-primary would result in a simple blue-rounded button in our themes.If your theme does not include Bootstrap, the button may get rendered without any styling applied. Commonly most web browsers will display it as a smaller grey button and black text. Alternatively you might choose to use other button styling your theme uses (consult with the theme manual or developer for details).
There are plenty of free button generators available online, so it's feasible to create generate your own CSS code for the buttons. The green button above was created by going to Best Button Generator and choosing one of the existing button designs. The generated CSS code is pasted into the RapidWeaver Page Inspector > Code > CSS box. Then we change the button class (in the AddEvent stack settings) from
btn btn-primary to myButton. Within a matter of seconds, this method lets you change the buttons style effortlessly.The little icons shown alongside the button text are Font Awesome icons. You can choose to use a different icon. The exact markup depends on what version of Font Awesome your theme or Stacks plugin uses.
