Sencha Touch Calendar component
JavaScript Ruby
Switch branches/tags
Nothing to show
Pull request Compare This branch is 1 commit ahead, 140 commits behind SwarmOnline:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Ext.ux.TouchCalendarEvents
Ext.ux.TouchCalendarSimpleEvents
builder
docs
examples
lib/sencha
min
resources
screenshots
unittests
.project
Ext.ux.TouchCalendar.js
Ext.ux.TouchCalendarView.js
README.md
build.bat
index.html

README.md

Ext.ux.TouchCalendar

Ext.ux.TouchCalendar is an extension, and set of related plugins, for the Sencha Touch framework that allows easy integration of a calendar component into applications.

Demos

Ext.ux.TouchCalendar Demo

Ext.ux.TouchCalendarView Demo

Ext.ux.TouchCalendarSimpleEvents Demo

Ext.ux.TouchCalendarEvents Demo

Calendar with Linked List Demo

Ext.ux.TouchCalendarView

The main extension is contained in the root folder of the repository and can be included in your project (along with its CSS file located within the resources/css folder) and will give you a basic calendar view (either showing a month, week or day) that can be configured with various options.

Ext.ux.TouchCalendarView Screenshot Ext.ux.TouchCalendarView Screenshot Ext.ux.TouchCalendarView Screenshot

Ext.ux.TouchCalendarView Demo

Ext.ux.TouchCalendar

This extension wraps the Ext.ux.TouchCalendarView in a Ext.Carousel component and allows the calendar to respond to swipe gestures to switch the displayed period. It works by creating 3 Ext.ux.TouchCalendarViews and dynamically creating/removing views as the user moves back/forward through time.

Ext.ux.TouchCalendar Screenshot

Ext.ux.TouchCalendar Demo

Ext.ux.TouchCalendarSimpleEvents

This plugin can be added to an Ext.ux.TouchCalendar instance to allow a store to be bound to the calendar so events can be shown in a similar style to the iPhone does with a dot added to each day to represent the presence of an event.

Ext.ux.TouchCalendarSimpleEvents Screenshot

Ext.ux.TouchCalendarSimpleEvents Demo

Ext.ux.TouchCalendarEvents

This plugin also allows a store to be bound to the Ext.ux.TouchCalendar and will display the store's events as bars spanning its relevant days.

Ext.ux.TouchCalendarEvents Screenshot

Ext.ux.TouchCalendarEvents Demo

Usage

Ext.ux.TouchCalendarView

Include the extension's JS file and related CSS file in your HTML page.

<link rel="stylesheet" type="text/css" href="resources/css/Ext.ux.TouchCalendarView.css" media="all"/>
<script src="Ext.ux.TouchCalendarView.js" type="text/javascript" language="JavaScript"></script>

In your onReady function instantiate an Ext.ux.TouchCalendarView instance passing in any configuration options you want it to have.

Ext.setup({
    onReady: function(){
                    
        var calendarView = new Ext.ux.TouchCalendarView({
            mode: 'month',
            value: new Date()
        });
        
        var panel = new Ext.Panel({
            fullscreen: true,
            layout: 'fit',
            items: [calendarView]
    	});
	
    }
});

Ext.ux.TouchCalendar

This extension requires its own source JS to be included as well as the Ext.ux.TouchCalendarView's code.

<script src="Ext.ux.TouchCalendar.js" type="text/javascript" language="JavaScript"></script>

In your onReady function instantiate an Ext.ux.TouchCalendar instance passing in any configuration options you want it to have. You can specify a viewConfig option which will be used to configure the underlying Ext.ux.TouchCalendarView instances and accepts any options that that component can.

Ext.setup({
    onReady: function(){
                    
			var calendar = new Ext.ux.TouchCalendar({
				fullscreen: true,
				viewConfig: {
					mode: 'month',
					weekStart: 1,
					value: new Date()
				}
            });
    }
});

Ext.ux.TouchCalendarSimpleEvents

This plugin requires its own source JS and CSS to be included (within the Ext.ux.TouchCalendarSimpleEvents folder) as well as the main extension's code.

<script src="Ext.ux.TouchCalendarSimpleEvents.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="resources/css/Ext.ux.TouchCalendarSimpleEvents.css" media="all"/>

The next step is to create an Ext.data.Store with event data that we can bind to the calendar.

Ext.regModel('Event', {
    fields: [{
        name: 'event',
        type: 'string'
    }, {
        name: 'location',
        type: 'string'
    }, {
        name: 'start',
        type: 'date',
        dateFormat: 'c'
    }, {
        name: 'end',
        type: 'date',
        dateFormat: 'c'
    }]
});

var eventStore = new Ext.data.Store({
    model: 'Event',
    data: [{
        event: 'Sencha Con',
        location: 'Austin, Texas',
        start: new Date(2011, 9, 23),
        end: new Date(2011, 9, 26)
    }]
});

We can now instantiate the Ext.ux.TouchCalendarSimpleEvents plugin within the main calendar's plugins configuration. We also pass a store config option to the Ext.ux.TouchCalendar.

var calendar = new Ext.ux.TouchCalendarView({
    value: new Date(),
    
    store: eventStore,        
    plugins: [new Ext.ux.TouchCalendarSimpleEvents()]
});

Ext.ux.TouchCalendarEvents

Once again the plugins files must be included in your HTML file and a store created as we have done in the instructions above.

We can then instantiate the Ext.ux.TouchCalendarEvents plugin and supply it with a simple Ext.XTemplate which will be used to render the contents of each Event's bar.

var calendar = new Ext.ux.TouchCalendarView({
   value: new Date(),
   store: eventStore,

   plugins: [new Ext.ux.TouchCalendarEvents({
       eventBarTpl: new Ext.XTemplate('{event} - {location}')
   })]
});

Known Issues

There are a few known issues that will be ironed out after the first release, namely:

  • When using the Ext.ux.TouchCalendar the setValue logic isn't complete for dealing with selections across the 3 views.
  • The Ext.ux.TouchCalendarEvents/Ext.ux.TouchCalendarSimpleEvents plugins aren't compatible with the Day mode.

Acknowledgements

I'd like to thank @megous for his sencha-touch-ux-datepicker extension which this extension originally grew from.