NlsCalendar Professional
addobject.com
Multiple Instances
NlsCalendar Professional - Advanced Calendar Control
   

NlsCalendar supports multiple instances in a page. You can create more than 1 calendars in a page with each calendar has its own properties and configurations.

The example below shows 2 calendars with different style.

Example code:


                <html>
                  <head>
                    <link rel="stylesheet" href="cal2_nlscalendar.css" type="text/css" />
                    <link rel="stylesheet" href="cal1_nlscalendar.css" type="text/css" />
                  </head>
                  <body>
                    <script>
                      var cal=new AOCalendar("cal1");
                      cal.opt.themeDir="../themes/default/";
                      cal.opt.mode=1;
                      cal.opt.dtFormat="$dm/$dd/$YY";
                      cal.opt.enableTime=true;
                      cal.render();
                    </script>
                    <script>
                      var cal2=new AOCalendar("cal2");
                      cal2.opt.themeDir="../themes/default/";
                      cal2.opt.mode=1;
                      cal2.opt.dtFormat="$dm/$dd/$YY";
                      cal2.opt.showAdjcDates = true;
                      cal2.render();
                    </script>
                  </body>
                  </html>
                

In the example above, the calendars are also have different style. This is enabled by using css id based rule. Just copy the stylesheet and add calendar id (for example cal1) to all rules defined in the stylesheet then configure the style for each calendar for example:


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