The first multiple pieces of setting up my Schedule Converter was creating functions that would process the information on the screen and convert them into csv and ics formats for calendar upload.  Now it’s time to create the part of my file that actually interacts with the webpage, and allows you to access the other functions I’ve made.  To do this I’ve used a variety of jQuery functions.  

$j(document).ready(function(){

 $j('.boxLight div:last-child')[1].insertAdjacentHTML('beforeend', "<button id='downloadcalendar' style='width: 140px'>Download Calendar</button> <br>");

 $j('#downloadcalendar').click(function(){

     if ($j('#popupcalendar').length > 0){

       $j('#popupcalendar').css({'display':'block'});        

     }else...

});

});


To begin with I use .ready() which calls a specific function once the page has fully loaded.  I fill .ready() with a function that does some HTML adjustments and buttons that call the createcsv() and createics() functions explained previously.  When I started creating this part of the extension, I decided I wanted the initial adjustments to the screen to flow with the page layout already.  Therefore I simply added in another button with the same style as the others, and I put it with the other related buttons in the Team Tools box.

<insert pic from file ‘before’>

This was fairly simply to do using something from HTML5.  By using .insertAdjacentHTML() I was able to indicate where I wanted the new bit of HTML to go, what I wanted it to look like, and any text that was to be entered.  Thus the button that didn’t exist in the above mentioned photo, once the extension is loaded into your browser, will insert this button shown below:

<insert pic from file ‘after’>

Once the button is displayed, the user can click on it.  Once a click occurs, the .click() function runs.  This will begin with using the .length property which determines if the current length of the jQuery array is more than zero.  This is done to prevent the code from continuously recreating the popupcalendar.  Basically if popupcalendar has already been created, the length will be more than zero and at this time it will simply adjust the css to show the element again by making the display equal to block.  Otherwise it will create the element for the first time.    

Up Next Time: Displaying the inserted HTML after a button click