Compact calendar and event : Calendar « SmartClient « JavaScript DHTML





Compact calendar and event

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.

Open Source License

SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html

If your project precludes the use of this license, or if you'd like to support SmartClient LGPL, 
we encourage you to buy a commercial license.

Icon Experience Collection

Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.com) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.

All other media found under the isomorphic/skins directory may be used under the LGPLv3.

Commercial Licenses

A number of commercial licenses are available for purchase. Please see http://smartclient.com/license.

Warranty Disclaimer

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.

Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 


-->

<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->



<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='silver'>

<SCRIPT>

var _today = new Date;
var _start = _today.getDate() - _today.getDay();
var _month = _today.getMonth();
var _year = _today.getFullYear();
var eventData = [
{
    eventId: 1, 
    name: "Meeting",
    description: "Shareholders meeting: monthly forecast report",
    startDate: new Date(_year, _month, _start + 2, 9),
    endDate: new Date(_year, _month, _start + 2, 14)
},
{
    eventId: 2,
    name: "Realtor",
    description: "Breakfast with realtor to discuss moving plans",
    startDate: new Date(_year, _month, _start + 3, 8 ),
    endDate: new Date(_year, _month, _start + 3, 10)
},
{
    eventId: 3,
    name: "Soccer",
    description: "Little league soccer finals",
    startDate: new Date(_year, _month, _start + 4, 13),
    endDate: new Date(_year, _month, _start + 4, 16)
},
{
    eventId: 4, 
    name: "Sleep",
    description: "Catch up on sleep",
    startDate: new Date(_year, _month, _start + 4, 5),
    endDate: new Date(_year, _month, _start + 4, 9)
},
{
    eventId: 5,
    name: "Inspection",
    description: "Home inspector coming",
    startDate: new Date(_year, _month, _start + 4, 10),
    endDate: new Date(_year, _month, _start + 4, 12),
    eventWindowStyle: "testStyle",
    canEdit: false
},
{
    eventId: 6,
    name: "Airport run",
    description: "Pick James up from the airport",
    startDate: new Date(_year, _month, _start + 4, 1),
    endDate: new Date(_year, _month, _start + 4, 3)
},
{
    eventId: 7,
    name: "Dinner Party",
    description: "Prepare elaborate meal for friends",
    startDate: new Date(_year, _month, _start + 4, 17),
    endDate: new Date(_year, _month, _start + 4, 20)
},
{
    eventId: 8,
    name: "Poker",
    description: "Poker at Steve's house",
    startDate: new Date(_year, _month, _start + 4, 21),
    endDate: new Date(_year, _month, _start + 4, 23)
},
{
    eventId: 9,
    name: "Meeting",
    description: "Board of directors meeting: discussion of next months strategy",
    startDate: new Date(_year, _month, _start + 5, 11),
    endDate: new Date(_year, _month, _start + 5, 15)
}
];


// using a client-only dataSource so that test data is always relative to the current date
isc.DataSource.create({
    ID: "eventDS",
    fields:[
        {name:"eventId", primaryKey: true, type: "sequence"},
        {name:"name"},
        {name:"description"},
        {name:"startDate", type: "datetime"},
        {name:"endDate", type: "datetime"}
    ],
    clientOnly: true,
    testData: eventData
        
});     


isc.DataSource.create({
    ID: "eventDS",
    fields:[
        {name:"eventId", primaryKey: true, type: "sequence"},
        {name:"name"},
        {name:"description"},
        {name:"startDate"},
        {name:"endDate"}
    ],
    clientOnly: true,
    testData: eventData
        
});     

isc.DataSource.create({
        ID: "eventDS",
        fields:[
            {name:"eventId", primaryKey: true, type: "sequence"},
            {name:"name"},
            {name:"description"},
            {name:"startDate"},
            {name:"endDate"}
        ],
        clientOnly: true,
        testData: eventData
        
});     

isc.Calendar.create({
        ID: "eventCalendar", 
        width: 500,
        height: 220,
        showDayView: false,
        showWeekView: false,
        showOtherDays: false,
        showDayHeaders: false,
        showDateChooser: false,
        showDatePickerButton: false,
        showAddEventButton: false,
        disableWeekends: false,
        dataSource: eventDS,
        autoFetchData: true,
        showDateChooser: true,
        canCreateEvents : false,
        getDayBodyHTML : function (date, events, calendar, rowNum, colNum) {
            returnStr = date.getDate() + " ";
            if (events && events.length > 0) {
                returnStr += this.imgHTML("icons/16/approved.png", 16, 16, "image", "style='margin-top:6px'");
            }
            return returnStr;
        },
        dayBodyClick : function (date, events, calendar, rowNum, colNum) {
            var nameStr="";
            if (events.length == 0) nameStr = "No events"; 
            for (var i=0; i<events.length; i++) {
                nameStr += events[i].name + "<BR/>";   
            }
            isc.say(nameStr, {title:date.toUSShortDate()});    
        }
        
        
});




</SCRIPT>
</BODY>
</HTML>

   
  










Related examples in the same category

1.Day, week and month calendar
2.Workday calendar