9. Multiple Instances

NlsCalendar supports multiple instances in a page. Creating multiple instances of calendar is just the same as creating single instance of calendar. Each calendar could have its own properties and configurations.

Please note that the calendar id and variable must be unique for each instance as shown in example below.


        <html>
        <head>
        <title>Multiple Instances</title>
        <link rel="StyleSheet" href="themes/default/nlscalendar.css" type="text/css" />
        <script language="javascript" src="lib/nlscalendar.js"></script>
        </head>
        
        <body>
          <table>
          <tr>
            <td>
              <script>
                //create first instance of calendar with variable name "cal1"
                var cal1=new AOCalendar("cal1");
                cal1.themeDir="themes/default/";
                cal1.opt.mode=1; 
                cal1.render();
              </script>
            </td>
            <td>
               <script>
                //create second instance of calendar with variable name "cal2"
                var cal2=new AOCalendar("cal2");
                cal2.themeDir="themes/default/";
                cal2.opt.mode=1; 
                cal2.render();
              </script>           
            </td>
          </tr>
          </table>
        </body>

        </html>
      

It is also possible to have different style for each calendar in a page. This is enabled by using css id selector. Just add id selector to all class rules defined in stylesheet. The id will be calendar id when creating the calendar for example cal1 or cal2 in the example above. For example for calendar cal1:

        
        #cal1 .nlscal {...}
        #cal1 .nlscalshield {...}
        #cal1 .nlscalheader {...}
        #cal1 .nlscaltitle {...}
        ...
      

This way you can create different style for calendar which has id cal1