Getting Started With Calendar

Integrating the Calendar component onto a web page is done entirely via HTML. Follow the steps below to get up and running in no time!

Setting Up Dependent Files and Initializing the Component

We have to make sure that all of prerequisite files that the Calendar component relies on are present. Please follow the steps detailed in the general integration article. Note: that article integrates a combobox and Grid component, and thus refers to those components' dependent files. Make sure you include the proper Calendar files instead!

Basic Calendar Declaration

Assuming you've followed the steps from the general integration article and have the Calendar's JavaScript and CSS files linked into your web page properly, we are ready to declare the Calendar's markup.

  • First, it is recommended to place the Calendar declaration inside a <div> element.
  • Next, add the HTML markup. Here is a very basic example:
<ntb:datepicker id="myCal" theme="leopard">
  <ntb:dateinput></ntb:dateinput>
  <ntb:calendar></ntb:calendar>
<ntb:datepicker>

A few explanations are in order:
  • The <ntb:datepicker> element corresponds to the overall Calendar component. At the very least, you need specify the id attribute, which is required to initialize the component. Additionally, the theme attribute corresponds to which of the pre-packaged themes to use to style the Calendar.
  • The <ntb:dateinput> element corresponds to the text input area.
  • Lastly, the <ntb:calendar> element corresponds to the actual calendar that pops up when the Calendar is activated.

All of these HTML declarations have a variety of attributes that you can customize. Please have a look at Calendar HTML reference for more details on attribute specifics.

Sample HTML Source Code

Here's what the basic HTML page should look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- It's important to use the ntb namespace in the HTML tag or the datepicker will not render -->
<html xmlns:ntb="http://www.nitobi.com">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Nitobi Calendar: Getting Started</title>
<!-- Now we include the CSS for the component -->
<link type="text/css" rel="stylesheet" href="style/nitobi.calendar.css"></link>
<!-- First we include the Toolkit JavaScript -->
<script language="javascript" src="script/nitobi.toolkit.js"></script>
<!-- Now we include the component JavaScript -->
<script language="javascript" src="script/nitobi.calendar.js"></script>
<script type="text/javascript">
<!--
nitobi.html.attachEvent(window,"load",function(){nitobi.loadComponent("myCal")});
//-->
</script>
</head>
<body>
    <div id="component">
        <ntb:datepicker id="myCal" theme="leopard">
            <ntb:dateinput></ntb:dateinput>
            <ntb:calendar></ntb:calendar>
        </ntb:datepicker>
    </div>
</body>
</html>

Comments

Fold
What's wrong
Kevin (guest) 1230674404|%e %b %Y, %H:%M %Z|agohover

I cut & paste the sample code to a html file and put that file on tomcat. The page was loaded with calendar and choose month box pre-opened. I have no way to make them disappear. Am I doing something wrong?

Options
Unfold What's wrong by Kevin (guest), 1230674404|%e %b %Y, %H:%M %Z|agohover
Add a New Comment
page_revision: 8, last_edited: 1225226828|%e %b %Y, %H:%M %Z (%O ago)
EditTags History Files Print Site tools+ Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License