Example: step by step

PREV
NEXT

For example you have bought this extension, and don’t know what to do next, it isn’t a problem, you can use our example as a basis!

Installing Adobe Dreamweaver extension

Download your extension S4W.JQGoogleCalendar.zxp from your customer area at our site. Download and install our Extension Manager, load it, click install button and then select your ZXP extension.

Insert

Google Calendar can be inserted in the web page through the menu option "Insert -> Solutions4Website -> JQuery Google Calendar". It is also accessible through 'JQuery Google Calendar' button on the S4W category of the Insert Panel (Window > Insert).

Inserting object in the page through the menu option.

  1. Open Adobe Dreamweaver.
  2. In the Dreamweaver authoring tool, select File -> New.
  3. In the New Document dialog box, select HTML file, and click OK.
  4. Select File -> Save. Select a folder to contain your application, name the HTML file, and then click OK.
  5. Select Insert -> Solutions4Website -> JQuery Google Calendar.

  6. You have to define the destination folder (you can choose or create any folder you want). There (in this folder) will be created folder 'calendar_files' and inside this folder will be placed script and style files.

  7. Then just press OK.

Note: Before you insert Object into new web page, save the HTML file.

Enter Solutions4Website Wizard

To adjust the component appearance use Wizard. To do this, click mouse on the blue tab 'JQuery Google Calendar: JQGoogleCalendar' above the Bar in 'Design view'.

Entering the Solutions4Website Wizard

  1. Click mouse on the blue tab 'JQuery Google Calendar: JQGoogleCalendar' above the Bar in 'Design view'.
  2. Click 'Edit' in Dreamweaver 'Properties' panel.

Edit Calendar appearance

Through Wizard you can change strucutre of the form and its appearance.

Open Solutions4Website Wizard.

  1. Enter Solutions4Website Wizard.
  2. Open 'Calendar editor' category.
  3. Edit calendar appearance.
  4. Then just press OK and close window.

How to connect component to your Google Calendar

You need to give component access to your calendar data. For that you need to create and then copy Google API Key and IDs.

Connect component to your Google Calendar

  1. How to connect component to your Google Calendar
  2. Follow all the steps and copy keys and IDs into Wizard.

Preview

To preview your page you’ll need to save your document Select File > Save, than Select File > Preview In Browser, and then select one of the listed browsers or press F12 (Windows) or Option+F12 (Macintosh) to display the current document in the primary browser. Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary browser.

That’s all!