Good eveving,
Our application ran under Angular 2.1 with prime-ng 1.0.0-beta.17.
Our calendar component (Schedule => p-schedule) used to be initialized with an array of event.
When clicking a "refresh" button, we clean the calendar before getting updated data from the back end:
- Template: <p-schedule [locale]="fr" [events]="eventList" >
- Typescript: this:eventList = [];
- Typescript: call a service and get list of events
- Typescript: store received events in this.eventList. (for each event received, this.eventList.push(receivedEvent) )
It worked.
Since we have upgraded to angular 4.3 and primeng 4.1.0, I'm not able to clean the calendar anymore.
Even the command " this:eventList = [];" is executed, the calendar keep its values.
Once the service has been called, each event received is duplicated.
Would you mind helping me please? How can I clean my calendar before getting data from my back end?
Thanks in advance
Eric
How to clean a p-schedule
You had an application running under Angular 2.x until recently? And you upgraded to 4.3 when the latest version is 4.4.6?
I do use calendars and they work well. Assigning an empty array to the event list should clear the calendar. It clears mine.
Make sure you upgrade fullcalendar to the latest version. Same for moment.js. That's what I would check if you upgraded angular but perhaps forgot to look at p-schedule dependencies.
I assume the console is not displaying an error or you would have mentioned it...
I do use calendars and they work well. Assigning an empty array to the event list should clear the calendar. It clears mine.
Make sure you upgrade fullcalendar to the latest version. Same for moment.js. That's what I would check if you upgraded angular but perhaps forgot to look at p-schedule dependencies.
I assume the console is not displaying an error or you would have mentioned it...
I didn't see any issue when we reset the events.
Code: Select all
<button type="button" pButton icon="fa-close" (click)="reset()" label="reset" ></button>
Code: Select all
reset(){
this.events = [];
}
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/
___________________
Sudheer Jonna
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/
___________________
Sudheer Jonna
Hi,
Thank you very much for your prompt reply.
Our app ran in fact in Production with Angular 2.1.
A few weeks ago (end of July), we decided to upgrade libs'versions
- Angular 2.1 -> 4.3
- prime-ng 1.0.0-beta.17 -> 4.1.0
During the test (a few days ago) we noticed the "reset" button did not work anymore. As you said, the console did not displayed any error.
Following your advice I upgrade the dependencies ( it appeared I forgot to upgrade these libs)
- "fullcalendar": "2.7.3" -> 3.6.1
- "jquery": "3.0.0" -> 3.2.1
- "jquery-ui": "1.10.5" -> 1.12.1
- "moment": "2.13.0" -> 2.19.1
- "jquery-datetimepicker": "2.5.4" -> 2.5.11
After npm install and npm cache clean, I tried to display the calendar.
Now the console displays errors :
ERROR TypeError: e.toLowerCase is not a function
at _e (moment.min.js:1)
at ye (moment.min.js:1)
at Function.ve [as localeData] (moment.min.js:1)
at getMomentLocaleData (fullcalendar.js:11814)
at constructor.<anonymous> (fullcalendar.js:10069)
at fullcalendar.js:2229
at constructor._watchDeps (fullcalendar.js:2358)
at constructor.watch (fullcalendar.js:2228)
at constructor.initMomentInternals (fullcalendar.js:10055)
at new constructor (fullcalendar.js:9579)
I found the cause of my issue.
With the previous versions of my libs, I used to initialize my calendar with a [locale] property set as :
I deleted the this.localeInfo object from my class, then I deleted the reference in my template.
I added this in my index.html
And now everything works well! I can display my calendar et clean it with my "reset" button.
It remain me to find how to set custom locale properties (First day of week to Monday)
Thank you very much for your assistance, it has helped me.
Eric
Thank you very much for your prompt reply.
Our app ran in fact in Production with Angular 2.1.
A few weeks ago (end of July), we decided to upgrade libs'versions
- Angular 2.1 -> 4.3
- prime-ng 1.0.0-beta.17 -> 4.1.0
During the test (a few days ago) we noticed the "reset" button did not work anymore. As you said, the console did not displayed any error.
Following your advice I upgrade the dependencies ( it appeared I forgot to upgrade these libs)
- "fullcalendar": "2.7.3" -> 3.6.1
- "jquery": "3.0.0" -> 3.2.1
- "jquery-ui": "1.10.5" -> 1.12.1
- "moment": "2.13.0" -> 2.19.1
- "jquery-datetimepicker": "2.5.4" -> 2.5.11
After npm install and npm cache clean, I tried to display the calendar.
Now the console displays errors :
ERROR TypeError: e.toLowerCase is not a function
at _e (moment.min.js:1)
at ye (moment.min.js:1)
at Function.ve [as localeData] (moment.min.js:1)
at getMomentLocaleData (fullcalendar.js:11814)
at constructor.<anonymous> (fullcalendar.js:10069)
at fullcalendar.js:2229
at constructor._watchDeps (fullcalendar.js:2358)
at constructor.watch (fullcalendar.js:2228)
at constructor.initMomentInternals (fullcalendar.js:10055)
at new constructor (fullcalendar.js:9579)
I found the cause of my issue.
With the previous versions of my libs, I used to initialize my calendar with a [locale] property set as :
Code: Select all
this.localeInfo = {
firstDayOfWeek: 1,
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: 'Today',
clear: 'Clear'
};
Code: Select all
<p-schedule [locale]="localeInfo" [events]="events" [header]="header" [editable]="true" (onDayClick)="handleDayClick($event)" (onEventClick)="handleEventClick($event)"></p-schedule>
I added this in my index.html
Code: Select all
<script src='node_modules/fullcalendar/dist/locale-all.js'></script>
It remain me to find how to set custom locale properties (First day of week to Monday)
Thank you very much for your assistance, it has helped me.
Eric
Local Settings:
If this can help someone...
FullCalendar options are now set through an [option] property:
The last point is my calendar displays days with two capital letters ["MO", "TU", "WE", "TH", "FR", "SA", "SU"]
If I go to the previous month or next month, days are now displayed on three capital letters : ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
I do not know why...
If this can help someone...
FullCalendar options are now set through an [option] property:
Code: Select all
<p-schedule [options]="fullCalendarOption" [events]="events"></p-schedule>
Code: Select all
this.fullCalendarOption = {
firstDay: 1,
};
If I go to the previous month or next month, days are now displayed on three capital letters : ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
I do not know why...
Glad to hear it works. Your info might be helpful for others as well. Regarding months number of characters, Are you able to replicate on showcase or plunker example.
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/
___________________
Sudheer Jonna
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/
___________________
Sudheer Jonna
Those number of files(30) is quite huge. Just remove all the dependencies and other sections of code. So you can create plunker example with schedule component. Or else let me know the step to replicate on showcase example.
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/
___________________
Sudheer Jonna
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/
___________________
Sudheer Jonna
Hi,
I would like to apologize since I didn't succeed with plunkr (I tried but.... https://plnkr.co/edit/LOWl3y)
Please find here a workspace which would allow you to see the error.
https://github.com/Schim57300/POC_FullCalendar
=> 13 files and the content of node-module
Fork it, then npm start, you should see the calendar with 2 letters header.
Eric
I would like to apologize since I didn't succeed with plunkr (I tried but.... https://plnkr.co/edit/LOWl3y)
Please find here a workspace which would allow you to see the error.
https://github.com/Schim57300/POC_FullCalendar
=> 13 files and the content of node-module
Fork it, then npm start, you should see the calendar with 2 letters header.
Eric
Okay, I will try it when Im free. I can see some errors in Dev Tools.
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/
___________________
Sudheer Jonna
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/
___________________
Sudheer Jonna
-
- Information
-
Who is online
Users browsing this forum: No registered users and 21 guests