swarmonline / ext.ux.touchcalendar Goto Github PK
View Code? Open in Web Editor NEWSencha Touch Calendar component
Sencha Touch Calendar component
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.
Hi, is it possible to use Ext.ux.TouchCalendar with ExtJS 6 (modern toolkit)?
Thanks
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
{
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.
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
The example pages are not working in the current version of Chrome, Version 29.0.1547.66 m
Please add a "COPYING", "LICENSE", or "README" file explaining what license this source is available under.
Thanks!
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...
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');
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
var calendarView = Ext.create('Ext.ux.TouchCalendarView', {
value: new Date(),
store: eventStore,
plugins: [Ext.create('Ext.ux.TouchCalendarSimpleEvents')]
});
store: eventStore should be eventStore: eventStore
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.
Add ability to define the begin and end time that is displayed in the Day View.
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);
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,
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 ?
Hi stuart,
Bug report
Am using the mvc folder in your app.. there is bug in period change event
please follow these steps
Am trying hard to fix this issue.. please help me solve it.. your help is much appreciated thanks in advance…
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.
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;
},
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());
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
Steps to reproduce:
Missing days from 30th June to 6th July.
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..
demos dont work in new chrome 43
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.
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);
},
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.
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
Steps to reproduce:
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:
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:
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
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
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
Create a DatePicker field that will use the Calendar to let the user input the desired date.
When tapping on an Event Bar the calendar switches month.
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.
Ext.ux.TouchCalendarView.js
line 259
/**
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.