swarmonline / ext.ux.touchcalendar Goto Github PK

Changes to the data in the store are not automatically shown in the calendar.

Further, TouchCalendarView has a refresh() method, but to update TouchCalendar presumably you would have to directly call refresh on each underlying view.

Hi,

There is no license file associated with this code. Have you chosen a license under which to release this? I.e., BSD, MIT, etc.

Thanks.

Using TouchCalendarSimpleEvents in month view shows simple dots for events. But I would like to see the event details in the day view, hence am using TouchCalendarEvents while registering the day view. But this does not seem to work, day view shows nothing.

Even the SimpleEvents example on the site does not seem to work. Dots are seen in the month view but day view is blank.

Hey,

The calendar becomes un responsive when packed into a build for iOS. Have you experienced this? Are their any guidelines for including TouchCalendar inside device packages?

James

First of all, congratulations for the excellent work on this extension.

I was just wondering when the events and the day mode will be friends...

Actually, when changing to the day mode, the events gets all grouped in the top of the view. Even when the event got start and end times...

Hi,

Let me say that it is just awesome plugin .I am trying to add the calendar functionality to my new project, Its working great..

This is not actually an issue. Sorry I couldn't find a a better place to post this. Tell me if there is one, and I will post it again.

can you please see the thread in stackoverlfow

http://stackoverflow.com/questions/19263323/sencha-touch-overlay-point-to-html-element

Hi your plugin is amazing, there is a bug if you use sencha-touch-all.js the complete file that has widgets, Best Regards
Javier Roca

Add ability to define the begin and end time that is displayed in the Day View.

Steps to reproduce:

1. Implement the calendar week view (or open to examples/Ext.ux.TouchCalendarEvents-2.html)
2. Switch to Week View
3. Navigate till week 23rd June -- 29th June
4. Now swipe or click to go to next week, you will direct find 7th July -- 13th July week.

Missing days from 30th June to 6th July.

PFA - Screenshot taken in middle of swipe action.

Hi Stuart,

Currently the event bars for month view start out from its date box.
It looked proper after following changes:

File: Ext.ux.TouchCalendarMonthEvents.js
Line No: 106

Changes:

eventBar.setLeft((dayEl.dom.offsetLeft + (hasWrapped ? 0 : 4)) || (dayCellX + (hasWrapped ? 0 : spacing)));

eventBar.setTop(eventY - eventBarHeight - (barPosition * eventBarHeight + (barPosition * spacing) + spacing) - 5);

eventBar.setWidth((dayCellWidth * barLength) - (spacing * (doesWrap ? (doesWrap && hasWrapped ? 0 : 1) : 2)) - 5);

In the following code, the calendar is not scrollable (there may be other layout issues, but that is the one I noticed first):

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

Adding a call to setMode('day') after the panel is created makes it work.

Please add a "COPYING", "LICENSE", or "README" file explaining what license this source is available under.

Thanks!

Scenario:
Model.Event (id, user_id)
Model.User (id)
User hasMany Events

calendar store is set to user.events() store, which contains user_id filter

when bars are rendered with TouchCalendarEvents all bars take up whole month (displayed days) since sencha store doesn't support multiple filters (or I didn't know how to make them work).

My fix in Ext.ux.TouchCalendarEvents.js
was to remove store.filterBy (line 305) and replace it with the same condition inside store.each, before eventBarIndex. Removed store.clearFilter() (line 384) as well.

Changed source function:

   generateEventBars: function () {
        /**
        * @property {Ext.data.Store} eventBarStore Store to store the Event Bar definitions. It is defined 
        * with the Ext.ux.CalendarEventBarModel model.
        * @private
        */
        this.eventBarStore = Ext.create('Ext.data.Store', {
            model: 'Ext.ux.CalendarEventBarModel',
            data: []
        });

        var dates = this.calendar.getStore();
        var store = this.calendar.eventStore;
        var eventBarRecord;

        // Loop through Calendar's date collection of visible dates
        dates.each(function (dateObj) {
            var currentDate = dateObj.get('date'),
        currentDateTime = Ext.Date.clearTime(currentDate, true).getTime(),
        takenDatePositions = []; // stores 'row positions' that are taken on current date

            // sort the Events Store so we have a consistent ordering to ensure no overlaps
            store.sort(this.startEventField, 'ASC');

            // Loop through currentDate's Events
            store.each(function (event) {

                // Filter event that is happening on the currentDate
                var startDate = Ext.Date.clearTime(event.get(this.startEventField), true).getTime();
                var endDate = Ext.Date.clearTime(event.get(this.endEventField), true).getTime();
                if (!(startDate <= currentDateTime && currentDateTime <= endDate))
                    return;

                // Find any Event Bar record in the EventBarStore for the current Event's record (using internalID)
                var eventBarIndex = this.eventBarStore.findBy(function (record, id) {
                    return record.get('EventID') === event.internalId;
                }, this);

                // if an EventBarRecord was found then it is a multiple day Event so we must link them
                if (eventBarIndex > -1) {
                    eventBarRecord = this.eventBarStore.getAt(eventBarIndex); // get the actual EventBarRecord

                    // recurse down the linked EventBarRecords to get the last record in the chain for
                    // wrapping Events
                    while (eventBarRecord.linked().getCount() > 0) {
                        eventBarRecord = eventBarRecord.linked().getAt(eventBarRecord.linked().getCount() - 1);
                    }

                    // if currentDate is at the start of the week then we must create a new EventBarRecord
                    // to represent the new bar on the next row.
                    if (currentDate.getDay() === this.calendar.weekStart) {
                        // push the inherited BarPosition of the parent 
                        // EventBarRecord onto the takenDatePositions array
                        takenDatePositions.push(eventBarRecord.get('BarPosition'));

                        // create a new EventBar record 
                        var wrappedEventBarRecord = Ext.ModelMgr.create({
                            EventID: event.internalId,
                            Date: currentDate,
                            BarLength: 1,
                            BarPosition: eventBarRecord.get('BarPosition'),
                            Colour: eventBarRecord.get('Colour'),
                            Record: event
                        }, 'Ext.ux.CalendarEventBarModel');

                        // add it as a linked EventBar of the parent
                        eventBarRecord.linked().add(wrappedEventBarRecord);
                    }
                    else {
                        // add the inherited BarPosition to the takenDatePositions array
                        takenDatePositions.push(eventBarRecord.get('BarPosition'));

                        // increment the BarLength value for this day
                        eventBarRecord.set('BarLength', eventBarRecord.get('BarLength') + 1);
                    }
                }
                else {
                    // get the next free bar position
                    var barPos = this.getNextFreePosition(takenDatePositions);

                    // push it onto array so it isn't reused
                    takenDatePositions.push(barPos);

                    // create new EventBar record
                    eventBarRecord = Ext.ModelMgr.create({
                        EventID: event.internalId,
                        Date: currentDate,
                        BarLength: 1,
                        BarPosition: barPos,
                        Colour: this.getRandomColour(),
                        Record: event
                    }, 'Ext.ux.CalendarEventBarModel');

                    // add EventBar record to main store
                    this.eventBarStore.add(eventBarRecord);
                }

            }, this);
        }, this);
    },

The example pages are not working in the current version of Chrome, Version 29.0.1547.66 m

Hi stuart,
Bug report

Am using the mvc folder in your app.. there is bug in period change event
please follow these steps

1. load mvc app
2. click event list
   3 click any date that have event
   4 Then click period change
   5 Rest of the events are gone from the calendar

Am trying hard to fix this issue.. please help me solve it.. your help is much appreciated thanks in advance…

Hi! Your plugins is amazing but has a bug very strange.
Every month October one day repeat many times.
Exemple:
Today is 18/10/2012 and on TouchCalendar the Day 20 repeat until the end.

Image: http://imageshack.us/a/img819/4075/erroroctober.jpg

Hi, is it possible to use Ext.ux.TouchCalendar with ExtJS 6 (modern toolkit)?
Thanks

demos dont work in new chrome 43

On an existing app (2+ years old), using Sencha Touch 2.4.1 and the current version of TouchCalendar as per the download link on swarmonline.com the calendar is no longer working. Instead of June coming up, I am seeing May. And when I try to move forward one month it jumps to August instead of June. This works just fine on safari.

Hi,

This is not actually an issue. I think I found a better way to integrate this awesome plugin in my project and wanted to share. Sorry I couldn't find a a better place to post this. Tell me if there is one, and I will post it again.

I didn't like the "Usage" from Readme.md because 1) this way the code would not be packed in app.js and we would loose the great ST2 package system; 2) The css would not be generated with SASS, like the rest of the code.

I integrated this plugin in the following way:

Copied the files to touch/src/ux and renamed them:

Ext.ux.TouchCalendarView.js -> <app_folder>/touch/src/ux/TouchCalendarView.js

Ext.ux.TouchCalendar.js -> <app_folder>/touch/src/ux/TouchCalendar.js

Ext.ux.TouchCalendarSimpleEvents.js -> <app_folder>/touch/src/ux/TouchCalendarSimpleEvents.js

Ext.ux.TouchCalendarEvents.js -> <app_folder>/touch/src/ux/TouchCalendarEvents.js

Copied the .scss to be included in my project

Ext.ux.TouchCalendarView.scss -> <app_folder>/resources/sass/include/_TouchCalendarView.scss

Ext.ux.TouchCalendarEvents.scss -> <app_folder>/resources/sass/include/_TouchCalendarEvents.scss

Ext.ux.TouchCalendarSimpleEvents.scss -> <app_folder>/resources/sass/include/_TouchCalendarSimpleEvents.scss

Used the plugin in my code like this:

In the view:

Ext.define('MyApp.view.Agenda', {
  extend: "Ext.Panel",
  alias: "widget.agenda",
  ctype: 'mainContent',
  requires: ['Ext.ux.TouchCalendarView'],
 initialize: function() {
    var calendarView = {
      xtype : 'calendarview',
      viewMode: 'month',
      weekStart: 1,
      value: new Date(),
      flex: 1,
      height: 400
    };

In app.scss:

@import 'include/_TouchCalendarView';

Thanks!
Tiago

Example: June 2013 has one unnecessary row containing only days from July.

This updated function fixes the problem:

TouchCalendarView.js:804:809

getTotalDays: function(date){
    var firstDate = Ext.Date.getFirstDateOfMonth(date);
    var lastDate = Ext.Date.getLastDateOfMonth(date);

    return this.isWeekend(firstDate) && !this.isWeekend(lastDate) ? 42 : 35;
},

Please can someone help with locale in sencha, how to import my language in calendar.I imported js-script ext-lang-sk.js to the html file. And still no works.

If you create a floating panel above the calendar (using the Event bar plugin) that contains a draggable element (e.g. a slider field) you will get an error when moving the slider.

The calendar needs to check the drag element belongs to the calendar.

var calendarView = Ext.create('Ext.ux.TouchCalendarView', {
value: new Date(),

    store: eventStore,        
    plugins: [Ext.create('Ext.ux.TouchCalendarSimpleEvents')]
});

store: eventStore should be eventStore: eventStore

This is a simple item to fix. However, I wanted to let you know about it.

When I go to:

http://localhost/touchcalendar/examples/events-list.html

and click on Month or Year, I get a javascript error:

Uncaught TypeError: Object [object Object] has no method 'setMode' events-list.html:49

The example should have

calendar.setViewMode('month');
calendar.setViewMode('week');
instead of:

calendar.setMode('month');
calendar.setViewMode('week');

When tapping on an Event Bar the calendar switches month.

I tried to modify model definition for working on my server api, and then setting the idProperty for unique event id as like below

Ext.define('MomPapa.model.Program', {
extend: 'Ext.data.Model',
config: {
idProperty: 'progress_idx',
fields: [{
name: 'progress_idx',
type: 'int'
}, {
name: 'event',
type: 'string'
}, {
name: 'title',
type: 'string'
}, {
name: 'start',
type: 'date',
dateFormat: 'c'
}, {
name: 'end',
type: 'date',
dateFormat: 'c'
}, {
name: 'css',
type: 'string'
}]
}
});


and then... the eventtap handler get the undefined eventRecord, because searching record failed... I eventually found the code that make error.
in the below code, you try to find the record by comparing internalId and eventID with === operator. However, in this case, internalId is string and eventId is number, so always this searching cannot find anything...

/**
* Get the Event record with the specified eventID (eventID equates to a record's internalId)
* @method
* @private
* @param {Object} eventID
*/
getEventRecord: function(eventID){
var eventRecordIndex = this.calendar.eventStore.findBy(function(rec){
return rec.internalId === eventID;
}, this);
return this.calendar.eventStore.getAt(eventRecordIndex);
},


Please check this issue..

In TouchCalendarSimpleEvents.scss,

.ux-calendar
 {

must be changed to

.touch-calendar-view
{

to result in the same CSS as in github.

Likewise, in TouchCalendarEvents.scss,

 table.ux-calendar*/

should be

.touch-calendar-view
{

In TouchCalendarEventsBase.js, sort is called on eventStore repeatedly, for every date. In my test, moving sort() to before dates.each() reduced the time to display a new month in month view from 3 secs to 0.5 secs (with 300 event records, Chrome desktop browser).

dates.each(function(dateObj){
            var currentDate = dateObj.get('date'),
                currentDateTime = currentDate.getTime(),
                takenDatePositions = []; // stores 'row positions' that are taken on current date

            // sort the Events Store so we have a consistent ordering to ensure no overlaps
            eventStore.sort(this.getPlugin().getStartEventField(), this.getEventSortDirection());

Create a DatePicker field that will use the Calendar to let the user input the desired date.

Hi,

I tried the example given in the following folder for mobile application,

Ext.ux.TouchCalendar / examples / mvc /

I am getting the following error ,
Chrome => "Uncaught TypeError: Cannot read property 'sort' of undefined "
Safari => "undefined is not an object (evaluating 'eventStore.sort')"

Error occurred in Ext.ux.TouchCalendarEventsBase.js

line : ->

eventStore.sort(this.getPlugin().getStartEventField(), this.getEventSortDirection());

The corresponding values of the fields during run time,
this.getPlugin().getStartEventField() => start
this.getEventSortDirection() => DESC

Also this error is occurred before loading event store. Please check the following display in chrome console,

Uncaught TypeError: Cannot read property 'sort' of undefined Ext.ux.TouchCalendarEventsBase.js?_dc=1415814674027:68
XHR finished loading: GET "http://localhost:8888/touch/myapp/data/eventData.json?_dc=1415814675273&page=1&start=0&limit=25".

Please help me.

Thanks,

Steps to reproduce:

1. Invoke the calendar
2. Switch to day view
3. Tap on any time rows

It throws error in onTimeSlotTap, Line# 593
When we call this.getCellDate(target) it fails.
As per the code in getCellDate, we fetch the attribute - datetime from 'td' but in our case the 'td' does not have datetime attribute hence returning undefined.

Either we could do (in getCellDate):
var date = dateCell.dom.getAttribute('datetime') || dateCell.up('tr').down('td').getAttribute('datetime');

or on line# 597:

Ext.ux.TouchCalendarView.js

line 259

/**

• Handler for the selectionchange event which sets the internal value to the selected one.
• @method
• @Private
• @param {Object} selectionModel
• @param {Object} records
  */
  onSelectionChange: function(selectionModel, records){
  if(records.length > 0){
  this.setValue(records[0].get('date'));
  }
  }

DOCS

selectionchange( Ext.ux.Calendar this, Date previousValue, Date newValue )
Fires when the Calendar's selected date is changed

Parameters
this : Ext.ux.Calendar
previousValue : Date
Previously selected date
newValue : Date
Newly selected date

I updated my sencha version to 2.4.2 and when i load events from store
i have this stacktrace

(anonymous function) @ TouchCalendarMonthEvents.js?_dc=1436777044040:34
Ext.define.each @ Collection.js?_dc=1436777044229:526
Ext.define.each @ Store.js?_dc=1436777044043:1435
Ext.define.renderEventBars @ TouchCalendarMonthEvents.js?_dc=1436777044040:24
Ext.define.createEventWrapper @ TouchCalendarEvents.js?_dc=1436777044041:456
Ext.define.doFire @ Controller.js?_dc=1436777041078:199
Ext.define.fire @ Controller.js?_dc=1436777041078:126
Ext.define.doDispatchEvent @ Dispatcher.js?_dc=1436777041000:347
Ext.define.dispatch @ Publisher.js?_dc=1436777041079:65
Ext.define.run @ TaskQueue.js?_dc=1436777041595:98
(anonymous function) @ sencha-touch.js:3214

i hope in my update i forgot something, but if not there's a fix anywhere ?

Does anyone know how to fix this?

Hi,
I am trying to use "Ext.ux.TouchCalendarSimpleEvents" to bind events with stores but it looks like "Ext.ux.TouchCalendarSimpleEvents" is not able to detect store and throws this error :

Ext.ux.TouchCalendarSimpleEvents.js:169 Uncaught TypeError: Cannot read property 'clearFilter' of undefined

Below is the code :

Ext.setup({
onReady: function(){

    Ext.define("Event", {
        extend: "Ext.data.Model",
        config: {
            fields: [{
                name: 'event',
                type: 'string'
            }, {
                name: 'location',
                type: 'string'
            }, {
                name: 'start',
                type: 'date',
                dateFormat: 'c'
            }, {
                name: 'end',
                type: 'date',
                dateFormat: 'c'
            }]
        }
    });

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

    var calendarView = Ext.create('Ext.ux.TouchCalendarView', {
        value: new Date(),

        store: eventStore,        
        plugins: [Ext.create('Ext.ux.TouchCalendarSimpleEvents')]
    });
}

});

Am I doing anything wrong here ? Please let me know. Thanks in advance