pedrisco Posted May 8, 2018 Share Posted May 8, 2018 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 Quote Link to comment Share on other sites More sharing options...
epos4u Posted May 9, 2018 Share Posted May 9, 2018 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 Quote Link to comment Share on other sites More sharing options...
pedrisco Posted May 9, 2018 Author Share Posted May 9, 2018 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 (!?). Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 16, 2018 Share Posted May 16, 2018 Thanks pedrisco, Can you show me how to catch Day Cell Tap (click) event so I can add/edit/delete event - thanks Quote Link to comment Share on other sites More sharing options...
pedrisco Posted May 17, 2018 Author Share Posted May 17, 2018 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 . Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 17, 2018 Share Posted May 17, 2018 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) ? Quote Link to comment Share on other sites More sharing options...
pedrisco Posted May 18, 2018 Author Share Posted May 18, 2018 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()}, ...] ); Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 18, 2018 Share Posted May 18, 2018 Thank You Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 18, 2018 Share Posted May 18, 2018 Tried the following, both failed. frmBitacora.touchCalendar.setViewMode('week'); UniSession.AddJS(frmBitacora.calendarPanel.JSName+'.setViewMode(''week'');'); NO setViewMode Function ? Quote Link to comment Share on other sites More sharing options...
pedrisco Posted May 18, 2018 Author Share Posted May 18, 2018 updated sample https://mega.nz/#!HkUS1ZQJ!PUrPygw1mFnM5E-TYnCh7LmkQht6tKjSYrr8FoVX28c Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 18, 2018 Share Posted May 18, 2018 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) +'])' ); Quote Link to comment Share on other sites More sharing options...
pedrisco Posted May 19, 2018 Author Share Posted May 19, 2018 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; Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 19, 2018 Share Posted May 19, 2018 Thank you Quote Link to comment Share on other sites More sharing options...
andyhill Posted May 19, 2018 Share Posted May 19, 2018 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. Quote Link to comment Share on other sites More sharing options...
pedrisco Posted May 19, 2018 Author Share Posted May 19, 2018 change timeout to 100 or something bigger Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.