AbanteCart Version(s) 1.2.15 use Calendar v 1.2.15. there are changes on how to create, delete, copy, move and delete event. The manual for Calendar 1.2.15 can be found here.

This manual is for:
AbanteCart Version(s) 1.2.6-1.2.13 use Calendar v 1.2.6.4
AbanteCart Version(s) 1.2.0 – 1.2.5 use Calendar v1.2.0.

Calendar Extension for Abantecart (Default template only) – works well with responsive designed webpages making a better looking page on different screen sizes.

Notes for Calendar v 1.2.6.3 :
Choose Bootstrap 3 default theme if you want to style the calendar according to your store theme.
Setup

   1. Select Default View (This is for displaying desired default view in storefront)
       Choose between:
       A.Day    -> Display single day mode
       B.Week -> Display week mode
       C.Month -> Display month mode
       C.List Week -> Display list week mode

   2. Do you want to display full day event in calendar?
       A.Yes if you want to show the full day event.
       B.No if you don't want to show the full day event.

   3. Do you want to limit the event display?(When there are too many events, a link that looks like "+2 more" is displayed.)
       A.Yes if you want to limit.
       B.No if you don't want to limit.

   4. Do you want to show the weekends in the calendar?
       Choose No if you want to hide weekends from the Calendar view.

   5. Select Your Store Timezone (This is for setting the timezone of the events)
       e.g. You live in Chicago,USA then your timezone would be America/Chicago.

   6. Select Open Hours (This is for setting store open hours in calendar display)
       Select the time from the dropdown box

   7. Select Closing Hours (This is for setting store closing hours in calendar display)
       Select the time from the dropdown box

   8. Select Time Format (This is for setting how event time will be displayed in storefront)

   9. Select Default Calendar Display Language (Month,Date,Time etc will be translated into this language)

   10. Choose if you want to display the Calendar in right-to-left(rtl) mode.
         This option is useful for right-to-left languages such as Arabic and Hebrew. Choose Yes if you want to enable it.

   11. Select the theme you want to use for the calendar presentation
         Select the theme from the dropdown box.
         To see the gallery of pre-formatted themes go to jQuery UI Theme Gallery.
         If you want to use your own customized theme choose Custom,please follow the steps on number 10 below.

   12. If using a Custom jQuery-UI theme name-input the custom theme name.
        To create new theme or edit existing theme please go to jQuery UI themeroller
        After you finished creating the theme,click on the Download theme.
        On the Download builder page:
          A. Select the 1.9.2 version.
          B. Unselect Toggle All components.
          C. Select Custom Theme on the dropdown box.
          D. Enter your desired theme name on the Theme Folder Name field without spaces.
          E. Leave the CSS Scope blank.
          F. After you're done,click download and save the compressed file in your desired folder.
          G. Uncompress the files, open the css folder, look for the folder that is the same with your theme name and upload it to extensions/calendar/storefront/
               view/default_html5/stylesheet/ via your FTP or CPanel.
          H. Finally enter the theme name here.

   13. Sort Order (You can leave it blank)

   Finally Click the Save button and Turn On the extension.
After you turn on the extension,you will find the extension page under Extensions menu :


Notes: If you want to look how it will displayed in your storefront,please take a look at the screenshot here
Time Based Event

Click on the Local Database Event,it will show :
1. New Time Based Event : Select the start and the end time for the event by dragging within the time frame,then use right click mouse to show context menu and click on the New button.
1.1. Title: Insert the event title.

1.2. Content URL: Insert the content URL Link if you want to direct it to other link.

1.3. Description: Insert the event description. e.g - : The event will be held in xxxx during this time period.

1.4. Start : It will show the event start time that you choose during selecting starting time.In case you want to change the date and time,just click on the input field and it will show datetime picker like this :



1.5. End: It will show the event end time .In case you want to change the date and time,just click on the input field and it will show datetime picker like the start time :


1.6. Color: This sets the background and border color the same for the events. To have to background and border with different color,leave Color blank.



1.7.Background color: This sets the background color.

1.8.Border color: This sets the border color.


1.9.Text color: This sets the text color.

After you insert the desired data,click the save button.

2. Copy or Move and paste Event: Right click on the event,select the action that you want to use which is copy or move,after that select the time by left clicking on the time frame you want the data copied or moved and right click again and click on the paste button.
    If you select copy,all the event data beside of start and end time are copied to the new event with the new start and end time.
    If you select move,all the data will be moved to the selected time.
    The copied or moved event start-end time duration will be the same as the original start-time time duration.e.g - Your event starts from 1pm-3pm,you want the event copied and start from 3pm,that means the end time is 5pm.So the event that you copied will automatically adjust base on the time duration.

3. Edit: Right click on the event that you want to edit the details and save the updated data.

4. Delete: Right click on the event that you want to delete.



Day Based Event

For the new all day event creation is differ from time based event :
1. Drag the day that you wish to create the event for.  After you stop dragging,then add event form will pop up like the time based event creation form.

2. The available context menu for the all day is edit and delete like the following image :

2.1. Edit: Right click on the event that you want to edit the details and save the updated data.

2.2. Delete: Right click on the event that you want to delete.

Edit Top And Bottom block content for calendar content page

You can add additional information above and/or below your Calendar display area using the Content tab.
This uses the standard block editor, one for each section; top content and bottom content.

Notes: You must add space to the end of the content as this extension doesn't add html <br> (break element) automatically.
Select the top content or bottom content, then click on the text Click Here to edit.., that will show the standard editor. Add the content that you wish to display and click SAVE to finish.

Local Database
This is how the calendar will be displayed based on your setup preference with top and bottom content.
For example you set:
Default View: Week
Show All Day Event: Yes
Limit the event to be displayed: Yes
Show weekends: No
Timezone: America/Chicago
Open Hours: 8:00 am
Closing hours: 7:00 pm
Time Format: MM-DD-YYYY, h:mm a
Default Calendar Display Language: English
RTL mode: No
Your calendar will be displayed like:

When the client clicks on the local database based event on storefront,they will get popup modal box containing the selected event detail like:

During creation or editing of an event, if you use Content URL: it will show Read More on the modal box under the description.
Notes: The Time Format that was used in this example screenshot was MM-DD-YYYY, h:mm a