In this article you will learn how to create a custom panel that contains a calendar and then how to add it to your templates.
1) Copy the code bellow and paste it in a text Editor, such as Notepad:
<div class="Block Moveable Panel" id="[Your Panel Name]"> <h2>[Your Title]</h2><div> [your code] </div> </div>
2) Go to http://www.instantcal.com/
3) Click on Calendar Catalog
4) Choose one of the styles from the catalogue
5) Click on Show HTML Embed Code
6) Copy the code and paste it in you text editor instead of [your code]. Also, replace [Your Panel Name] with the name of the panel and [Your Title] with a proper title
7) Save the file with the same name as the word you used instead of [Your Panel Name]
8) Connect to your FTP drive.
9) Choose /template and then/Panels from your list of folders
10) Drag and drop there the html file that you created
12) Login to your store's Control Panel and go to Design -> Browse Template Files.
13) Add %%Panel.Calendar%% to default.html
Now take a look at your store:
14) You can modify the position of this custom panel if you go to Calendar.html in the list of Template Files and add this code inside the second div:
style="margin-left: 20px;"
Enjoy and let me know if you found it useful!
If you are having issues with creating a custom panel, or installing this calendar then go ahead and contact us by requesting a BigCommerce quote.