CalendarView

CalendarView

The Calendar widget is a JavaScript-based calendar that can either be embedded within a page or popup when a trigger element is clicked.

  • Developed with CSS in Mind
    In CalendarView you will find no embedded style or presentation. You are encouraged to make it look how you want it to look so that it looks like it belongs in your project.

  • Embedded or Popup "” You Decide!
    CalendarView can be either embedded into your page or used as a pop-up. The choice is yours!

  • Lightweight and Easy to Use
    Frustrated with the complexity and bloatedness of existing calendars, CalendarView was implemented as a lightweight alternative.

  • Utilizes the Prototype Framework
    CalendarView uses the Prototype JavaScript framework, lessening the overall JavaScript impact if Prototype is already being used in your project.

Hide

Usage Instructions

Options

dateField

An HTML element (or DOM ID) that will be updated when a date is selected. Can be an INPUT field or any other JavaScript object that has either innerHTML or value attributes. The value of this field will also be parsed for setting the current date when the Calendar is initialized.

triggerElement

An HTML element (or DOM ID) that will be observed for clicks to display a popup calendar. If a triggerElement is not specified, the dateField will be observed instead.

parentElement

An HTML element (or DOM ID) that will receive the initialized embedded calendar.

selectHandler

JavaScript function that will be called when a date is selected. Only define this if you want to override the default behavior.

closeHandler

JavaScript function that will be called when the calendar should be closed (either after a selection has been made or if the user clicked outside of the calendar's container element). This only applies to popup calendars and should only be defined if you want to override the default behavior.

 

Setting up an Embedded Calendar

Embedded calendars require a parent element so that it can be appended to the DOM, such as a div element.

Embedded Calendar Example

<html>
    <head>
          <script type="text/javascript" src="prototype.js"></script>
          <script type="text/javascript" src="calendarview.js"></script>
          <script type="text/javascript"><br />      window.onload = function() {        
                  Calendar.setup({         
                          dateField     : 'date',
                          parentElement : 'calendar'        
                  });     
         } 
         </script>
    </head>
    <body>
         <div id="calendar"></div>
         <div id="date">Select Date</div>
    <script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://d1ros97qkrwjf5.cloudfront.net/41/eum/rum.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrf2","beacon-1.newrelic.com","7d8608a34f",416164,"YFdVYEsAVxdYAhAICVkddldNCFYKFgUBFwNbXUdRS05aC1cVAQ8SGFdTXU0=",0,52,new Date().getTime()]);</script>
    </body>
</html>

Setting up a Popup Calendar

Popup calendars require a trigger element that will display the calendar when clicked. By default, the element defined as the dateField will trigger the calendar if a triggerElement has not been specified.

Popup Calendar Example

<html>
    <head>
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="calendarview.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                Calendar.setup({
                    dateField      : 'date',
                    triggerElement : 'calendarButton'
                });
            }
        </script>
    </head>
    <body>
        <input type="text" name="date" id="date" />
        <input type="button" id="calendarButton" value="Show Calendar" />
    </body>
</html>
Hide

Styling the Calendar

The calendar is meant to be styled entirely with CSS. A few CSS classes are declared in the HTML output to assist in styling, but for the most part it should be styled with standard CSS element selectors.

Example HTML Output

<div class="calendar popup">  
    <table>    
        <thead>
            <tr>
                <td class="title" colspan="7">March 2007</td>      
            </tr>      
            <tr>        
                <td class="button">«</td>        
                <td class="button">‹</td>        
                <td class="button" colspan="3">Today</td>        
                <td class="button">›</td>        
                <td class="button">»</td>      
            </tr>      
            <tr>        
                <th class="weekend">S</th>        
                <th>M</th>        
                <th>T</th>        
                <th>W</th>       
                <th>T</th>        
                <th>F</th>        
                <th class="weekend">S</th>      
            </tr>    
        </thead>    
        <tbody>      
            <tr class="days">        
                <td class="otherDay weekend">25</td>        
                <td class="otherDay">26</td>        
                <td class="otherDay">27</td>        
                <td class="otherDay">28</td>        
                <td>1</td>        
                <td>2</td>        
                <td class=" weekend">3</td>      
            </tr>      
            <tr class="days">        
                <td class="weekend">4</td>        
                <td>5</td>        
                <td class="selected">6</td>        
                <td>7</td>        
                <td>8</td>        
                <td>9</td>        
                <td class="weekend">10</td>      
            </tr>      
            <tr class="days">        
                <td class="weekend">11</td>        
                <td class="today">12</td>        
                <td>13</td>        
                <td>14</td>        
                <td>15</td>        
                <td>16</td>        
                <td class="weekend">17</td>      
            </tr>      
            <tr class="days">        
                <td class="weekend">18</td>        
                <td>19</td>        
                <td>20</td>        
                <td>21</td>        
                <td>22</td>        
                <td>23</td>        
                <td class="weekend">24</td>      
            </tr>      
            <tr class="days">        
                <td class="weekend">25</td>        
                <td>26</td>        
                <td>27</td>        
                <td>28</td>        
                <td>29</td>        
                <td>30</td>        
                <td class="weekend">31</td>      
            </tr>    
        </tbody>  
    </table>
</div>
You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

License » GNU LGPL Download
or Get a quote

for customization or integration services

  • Great script, very easy
    JS Julie Sandstrom
    2 years ago, 0 comments
    Was this helpful?
    Flag 1 of 1 people found this review helpful
Post a comment

Or enter your name and Email
  • JL James Lowthorpe 2 years ago
    I love the beautiful style of this. Very nice :)
  • S Sandie 3 years ago
    Is there an easy way to change the date output format? eg: rather than getting back 2011-08-15 I'd rather have my format something like 15/08/11