How to clean a p-schedule

UI Components for Angular
schim
Posts: 7
Joined: 07 Feb 2017, 08:56

20 Oct 2017, 23:42

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

mmikeyy
Posts: 127
Joined: 11 May 2016, 17:39

22 Oct 2017, 08:15

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...

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

22 Oct 2017, 12:43

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

schim
Posts: 7
Joined: 07 Feb 2017, 08:56

22 Oct 2017, 16:57

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 :

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 deleted the this.localeInfo object from my class, then I deleted the reference in my template.
I added this in my index.html

Code: Select all

    <script src='node_modules/fullcalendar/dist/locale-all.js'></script>
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

schim
Posts: 7
Joined: 07 Feb 2017, 08:56

22 Oct 2017, 17:23

Local Settings:
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,
    };
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...

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

22 Oct 2017, 18:38

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

schim
Posts: 7
Joined: 07 Feb 2017, 08:56

23 Oct 2017, 22:33

Hi,

I made some cleaning in a copy of my project.
It remains 40 files. Is there any way to upload every files in plunkr?
Or would you be able to fork my workspace from Github?

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

24 Oct 2017, 01:55

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

schim
Posts: 7
Joined: 07 Feb 2017, 08:56

25 Oct 2017, 18:30

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

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

26 Oct 2017, 13:43

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests