Weekend background colors

Ask for help relating to our Sencha Touch based Scheduler (for iPad, or any other supported phone, phablet or tablet)
Post Reply
User avatar
chri5tian
Posts: 9
Joined: Fri Oct 09, 2015 3:22 pm

Weekend background colors

Post by chri5tian »

I'm stuck with the Touch Scheduler and I may ask many questions soon... please bear with me :-)
What is the best way to change the background color for a 'weekend' day (Sa/Su). I'm aware of the zone plugin which I'm using for holydays and special events - but not for weekends yet. I'm implementing a large dutyplan which holds hundreds of events per week and up to 100 resources. So performance should be good ;-)

thanks for helping.
Christian

User avatar
mats
Core Developer
Core Developer
Posts: 16692
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Weekend background colors

Post by mats »

You should definitely use the zones plugin, and set the 'Cls' property for your zones.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
chri5tian
Posts: 9
Joined: Fri Oct 09, 2015 3:22 pm

Re: Weekend background colors

Post by chri5tian »

thx for the reply. In order to make this happen, I need to filter the time range in the service.
For the EventStore, I’m supplying the start/endDate of the current visible date range to filter the events. I tried to do the same for the ZoneStore but have too issues.
a.) the dateFormat is not serialized the same way as in the eventStore,
b.) the start/endDate is not the current visible date range.
Where do I provide the selection parameters (startDate/endDate)for the Zone plugin?

Here are the two Service requests, where TAGESBEMERKUNG is the ZoneStore and DIENSTEINTEILUNG the EventStore

Code: Select all

/eAvanti-3.1.0.5/api/tagesbemerkung?_dc=1444637371096&id=E4F7A8887ABE490FBFABC864AA1D22EB&startDate=%2FDate(-62135596800000)%2F&endDate=%2FDate(-62135596800000)%2F&page=1&start=0&limit=25

/eAvanti-3.1.0.5/api/diensteinteilung?_dc=1444637371110&startDate=2015-10-12T00%3A00%3A00&endDate=2015-11-13T00%3A00%3A00&id=E4F7A8887ABE490FBFABC864AA1D22EB&page=1&start=0&limit=25
and the ZoneStore is like this:

Code: Select all

var zoneStore = Ext.create('Ext.data.JsonStore', {
            id: 'store_zone_id',
            model: 'Zone',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                method: 'GET',
                url: BASE_URL + 'api/tagesbemerkung',
                extraParams: {
                    id: model.Model.Id,
                    startDate: model.Model.startDate,
                    endDate: model.Model.endDate,
                },
                reader: {
                    type: 'json'
                }
            }
        });

User avatar
Maxim Gorkovsky
Core Developer
Core Developer
Posts: 3287
Joined: Wed Jan 08, 2014 11:46 am

Re: Weekend background colors

Post by Maxim Gorkovsky »

Hello.
Please read this doc entry: Sch.plugin.Zones.
You can extend Sch.model.Range and provide custom date format for start/end date fields. Use this model in zones store and everything should work.
the start/endDate is not the current visible date range.
How is this a problem? Please elaborate

User avatar
chri5tian
Posts: 9
Joined: Fri Oct 09, 2015 3:22 pm

Re: Weekend background colors

Post by chri5tian »

Thank you for the reply.
The model for the zone is fine (I think). It’s the date format for the request parameter sent to the service which is not in the required format (see my example above, the EventStore is done correctly).
For the 2nd part; I’m using the scheduler to show events and zones (weekends, holidays) within a certain time range. I have a defaultSpan of 31, meaning I see all events and weekends within the next 31 days – no more and no less. If the user is pulling the scheduler to the right, my date is changing 14 days earlier. At the same time, all events are reloaded based on the new time span – which is working nicely. However, for the Zone/ZoneStore it’s not. The Start/End Dates in the URL request stay at its initial value (today+31days) instead 14days earlier. I was expecting the ZoneStore to handle time shifts similar to the event store. I assume the ‘scheduler.timeAxis.adjustedStart‘ needs to be involved somehow(?)
As you can tell, I’m a c# programmer and have little experience on JS. My plan was to use the control, not to build it ;-) Any real-world example would be very much appreciated.

User avatar
Antarctica
Posts: 217
Joined: Mon Jan 13, 2014 3:22 pm

Re: Weekend background colors

Post by Antarctica »

I am doing sth very similar, and I added an override over the generateTicks function in Sch.data.TimeAxis.

Code: Select all

generateTicks:function(start, end) {
 this.callParent(arguments);
 Ext.getStore("ResourceZones").generateWeekends(start,end);
}
Errors are human, but to really mess up, you need a computer.

User avatar
Maxim Gorkovsky
Core Developer
Core Developer
Posts: 3287
Joined: Wed Jan 08, 2014 11:46 am

Re: Weekend background colors

Post by Maxim Gorkovsky »

chri5tian wrote: The model for the zone is fine (I think). It’s the date format for the request parameter sent to the service which is not in the required format (see my example above, the EventStore is done correctly).
Got it. You need to format date, take a look at this method. For some reason I don't see available formats in sencha doc, but you can find them here.
chri5tian wrote: was expecting the ZoneStore to handle time shifts similar to the event store.
Zones plugin is very simple and not supposed to track any time axis changes, this is up to developer. You can listen to reconfigure event and load zones there. Something like this:

Code: Select all

scheduler.timeAxis.on('reconfigure', function (timeAxis) {
  zoneStore.load({
    params : { start : Ext.Date.format(timeAxis.getStart(), 'h:m:s' }
  });
});

User avatar
chri5tian
Posts: 9
Joined: Fri Oct 09, 2015 3:22 pm

Re: Weekend background colors

Post by chri5tian »

@Antarctica; thank you for the hint. that Looks like a very efficient solution.

@Maxim; I managed to solve my issue just before your post. I’m doing the formatting myself and update my start/end parameters in the viewchange event. But your solution seams cleaner. I will adjust mine.

Post Reply