TouchCalendar sencha-touch CalendarPanel

[pedrisco]

I needed a "CalendarPanel" in mobile, so i took Ext.ux.TouchCalendar (https://github.com/SwarmOnline/Ext.ux.TouchCalendar) and merged in my sencha-touch project.

 

I can't upload this sample so i'm gonna leave this here, maybe can help to someone.

 

https://mega.nz/#!P0sgXbIQ!jsTHKaMMb7AzNCImIcQU1MmmQurbXN1ZEb0L8tO4td0

 

Tips:

calendarPanel.uniEvents.afterCreate

dpDate.extEvents.change

dpDate.uniEvents.beforeInit

dpDate.uniEvents.afterCreate

procedure TfrmBitacora.calendarPanelAjaxEvent

 

[epos4u]

I needed a "CalendarPanel" in mobile, so i took Ext.ux.TouchCalendar (https://github.com/SwarmOnline/Ext.ux.TouchCalendar) and merged in my sencha-touch project.

 

I can't upload this sample so i'm gonna leave this here, maybe can help to someone.

 

https://mega.nz/#!P0sgXbIQ!jsTHKaMMb7AzNCImIcQU1MmmQurbXN1ZEb0L8tO4td0

 

Tips:

calendarPanel.uniEvents.afterCreate

dpDate.extEvents.change

dpDate.uniEvents.beforeInit

dpDate.uniEvents.afterCreate

procedure TfrmBitacora.calendarPanelAjaxEvent

 

thank you for this,

errors with latest unigui v1.10

but works with older version

[pedrisco]

Sorry, I forgot to mention that, but as far as i know sencha-touch is not included in 1.10., and till now i haven't found a "plug&play" theme, that's why i'm still using sencha-touch. Maybe is just a matter of include it.

Moreover, i thought that in 1.10 there is no difference between mobile and desktop (!?).

[andyhill]

Thanks pedrisco, Can you show me how to catch Day Cell Tap (click) event so I can add/edit/delete event - thanks

[pedrisco]

I would say "selectionchange".

calendar.on('selectionchange', function(calendar, newDate, oldDate){
                        console.log('selectionchange');
                        console.log(calendar);
                    });

 

I've not tried all of them but you can see more events here https://github.com/SwarmOnline/Ext.ux.TouchCalendar/blob/master/examples/Ext.ux.TouchCalendarEvents.html .

[andyhill]

Gotit - Thanks.

 

How would I change View Mode (month, week, day) at runtime ?

 

Also, how would I populate the store calendar event records (add/edit/delete) ?

[pedrisco]

to change the view ...

frmBitacora.touchCalendar.setViewMode('month'); //month, week , day

 

to populate the store...

frmBitacora.touchCalendar.view.eventStore.setData( [
{event:"text1", start:new Date(), end: new Date()},
{event:"text2", start:new Date(), end: new Date()},

...
] );

[andyhill]

Thank You

[andyhill]

Tried the following, both failed.

 

frmBitacora.touchCalendar.setViewMode('week'); 

 

UniSession.AddJS(frmBitacora.calendarPanel.JSName+'.setViewMode(''week'');');

 

NO setViewMode Function ?

[pedrisco]

updated sample https://mega.nz/#!HkUS1ZQJ!PUrPygw1mFnM5E-TYnCh7LmkQht6tKjSYrr8FoVX28c

[andyhill]

Thanks again.

 

OK, I now see how you do Month / Week / Day view.

 

Using your example I have added a second event.

 

1) Events fail to show in Week and Day mode ?

 

2) Going from Month to Week to Day (scroll to 11pm), now goto Month View - it fails to show Month etc.. If I go back to Day and scroll back to 7am etc. it now works again ?

 

My goal is to Populate the events Store from a DataSet, any help here would be greatly appreciated.

 

 

        jsonString := '';

        jsonString := jsonString+'{'

                    + 'event:"' + 'any text here'+'"'

                    + ',start:"'+ formatDateTime( 'yyyy-mm-dd', now )+'"'

                    + ',end:"'  + formatDateTime( 'yyyy-mm-dd', now )+'"'

                    + '},'

 

                    + '{event:"' + 'any text here'+'"'

                    + ',start:"'+ formatDateTime( 'yyyy-mm-dd', now + 1)+'"'

                    + ',end:"'  + formatDateTime( 'yyyy-mm-dd', now + 1)+'"'

 

                    + '},';

        uniSession.AddJS(

            'frmBitacora.touchCalendar.view.eventStore.setData(['

            +copy(jsonString,1,length(jsonString)-1)

            +'])'

        );

 

[pedrisco]

I've found some issues too, it's buggy.

You can find the same issue in the sample https://www.swarmonline.com/Ext.ux.TouchCalendar/examples/Ext.ux.TouchCalendar.html, when you scroll down the day view, the other views scroll down too.

 

I know it's uggly but after "setView" do this...

 

setTimeout(function(){
    frmBitacora.touchCalendar.view.innerElement.setStyle({transform:""});
  },50); //increment if you need

 

 

to populate i'm doing this...

procedure TfrmBitacora.calendarPanelAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings);
      var date1,date2:String;
          jsonString:String;
begin
    if eventName='periodchange' then begin

        date1 := copy( params.Values[ 'date1' ], 4 );
        date1 := copy( date1, 7,2 )
                +FormatSettings.DateSeparator
                +copy( date1, 5,2 )
                +FormatSettings.DateSeparator
                +copy( date1, 1,4 );

        date2 := copy( params.Values[ 'date2' ] , 4 );
        date2 := copy( date2, 7,2 )
                +FormatSettings.DateSeparator
                +copy( date2, 5,2 )
                +FormatSettings.DateSeparator
                +copy( date2, 1,4 );

        dataSet.close;
        dataSet.ParamByName('date1').AsDate   := strToDate( date1 );
        dataSet.ParamByName('date2').AsDate   := strToDate( date2 );
        dataSet.Open;
        jsonString := '';
        while not dataSet.Eof do begin
            jsonString := jsonString+'{'
                        + 'event:"'+dataSet['event']+'"'
                        + ',start:"'+formatDateTime( 'yyyy-mm-dd',dataSet.FieldByName('fech').asDateTime )+'"'
                        + ',end:"'+formatDateTime( 'yyyy-mm-dd',dataSet.FieldByName('fech').asDateTime )+'"'
                        + '},';
            dataSet.next;
        end;
        uniSession.AddJS(
            'frmBitacora.touchCalendar.view.eventStore.setData(['
            +copy(jsonString,1,length(jsonString)-1)
            +'])'
        );
    end;
end;
 

[andyhill]

Thank you 

[andyhill]

Is this what you had in mind ?

 

function tap(sender, e, eOpts)

{

  frmBitacora.touchCalendar.setViewMode('day');

  

  setTimeout(function()

  {

    frmBitacora.touchCalendar.view.innerElement.setStyle({transform:""});

  }, 50);

    

}

 

If so it makes no difference.

[pedrisco]

change timeout to 100 or something bigger