We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

The favicon.ico asset path must start with the project source root

Hi, scheduler
I am trying to use the solution like the one in your documentation: Room scheduler

I was downloading the project from 


and run "npm install" .

I was trying to start the project with "ng serve" and I've got the following error:

"The favicon.ico asset path must start with the project source root".

Please help me to run the project.



32 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team December 30, 2019 11:45 AM UTC

Hi Mircea, 
 
Syncfusion greetings. 
 
Sample Browser stack blitz sample will include all the files for all the Syncfusion components including unwanted for Scheduler. It could be the cause for the issue. Kindly prepare the individual sample with only Scheduler reference like below UG link. 
  
Then include the resource code like below to render the Scheduler like online Room Scheduler sample. 
 
We have prepared the below sample for the same for your reference. Kindly use npm install and start commands. 

Regards,
 
Karthigeyan 



MI Mircea December 31, 2019 04:55 PM UTC

Thank you very much, now it is working...
I still have a question: how could I retrieve the source data from a local MongoDB database, not a local file?

Best regards,
Mircea


VM Vengatesh Maniraj Syncfusion Team January 2, 2020 07:26 AM UTC

Hi Mircea, 

Thanks for the update. 

We can bind the data to Scheduler from MongoDB  and we have prepared a sample for your reference which can be downloaded from the following location.  
   
   
In the above sample, we have added CRUD actions code snippet in server.js.  
MongoClient.connect(url, function (err, db) {  
    if (err) throw err;  
    var dbo = db.db("mydb");  
    app.use(function (req, res, next) {  
        res.header("Access-Control-Allow-Origin""*");  
        res.header("Access-Control-Allow-Headers""Origin, X-Requested-With, Content-Type, Accept");  
        next();  
    });  
    app.post("/GetData", (req, res) => {  
        dbo.collection('ScheduleData').find({}).toArray((err, cus) => {  
            res.send(cus);  
        });  
    });  
    app.post("/BatchData", (req, res) => {  
        console.log(req.body);  
        var eventData = [];  
        if (req.body.action == "insert" || (req.body.action == "batch" && req.body.added.length > 0)) {  
            (req.body.action == "insert") ? eventData.push(req.body.value) : eventData = req.body.added;  
            for (var i = 0; i < eventData.length; i++) {  
                var sdate = new Date(eventData[i].StartTime);  
                var edate = new Date(eventData[i].EndTime);  
                eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));  
                eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));  
                dbo.collection('ScheduleData').insertOne(eventData[i]);  
            }  
        }  
        if (req.body.action == "update" || (req.body.action == "batch" && req.body.changed.length > 0)) {  
            (req.body.action == "update") ? eventData.push(req.body.value) : eventData = req.body.changed;  
            for (var i = 0; i < eventData.length; i++) {  
                delete eventData[i]._id;  
                var sdate = new Date(eventData[i].StartTime);  
                var edate = new Date(eventData[i].EndTime);  
                eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));  
                eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));  
                dbo.collection('ScheduleData').updateOne({ "Id": eventData[i].Id }, { $set: eventData[i] });  
            }  
        }  
        if (req.body.action == "remove" || (req.body.action == "batch" && req.body.deleted.length > 0)) {  
            (req.body.action == "remove") ? eventData.push({ Id: req.body.key }) : eventData = req.body.deleted;  
            for (var i = 0; i < eventData.length; i++) {  
                dbo.collection('ScheduleData').deleteOne({ "Id": eventData[i].Id });  
            }  
        }  
        res.send(req.body);  
    });  
});  
  
  
Note: We have removed the local offset time before inserting and updating the events in the database collection to render the appointments without considering system UTC in the scheduler.  
   
In the below code we have given the GetData and BatchData url path to initial fetching and for performing CRUD actions using UrlAdaptor and assigned it to the scheduler datasource.  
    private dataManager: DataManager = new DataManager({  
    url: 'http://localhost:5000/GetData',  
    crudUrl: 'http://localhost:5000/BatchData',  
    adaptor: new UrlAdaptor,  
    crossDomain: true  
  });  
  public eventSettings: EventSettingsModel = { dataSource: this.dataManager };  
  
Steps to run the sample:  
  1. Run MongoDB and create the collection named ‘ScheduleData’ in ‘mydb’ database.
  2. Run the below comments.
npm install  
npm run server  
npm start  
   
Please try the above sample and let us know if you need further assistance.  
 
Regards, 
Vengatesh 



MI Mircea January 2, 2020 12:07 PM UTC

Hi Vengatesh ,

Your example is working but it is just an example for one resource (one room).
How can I retrieve data for multiple rooms from the database? Do I need multiple collections?
And second question, I saw you are using "app.post" when you are getting the records from a collection :
" app.post("/GetData", (req, res) => { "

Should not be "app. get" instead of "app.post" ?

Thank you very much for your help.

Regards,

Mircea



BS Balasubramanian Sattanathan Syncfusion Team January 4, 2020 02:45 AM UTC

Hi Mircea, 

Thanks for the update. 

We have modified the previously shared sample based on your requirement that can be viewed from below link. 


Kindly try the above sample and let us know if you need any further assistance on this. 

Regards, 
Balasubramanian S


MI Mircea January 5, 2020 07:33 PM UTC

Hi Sattanathan,

Thank you very much for your answer.

Now it is much better. 

I still have a question: is is possible to store the "categoryDataSource" in a MongoDB collection to update automatically the number of the available "rooms" when is necessary?

Best regards,

Mircea



MI Mircea January 5, 2020 11:20 PM UTC

Hi Sattanathan,

I updated your archive to Angular 8 and I have a problem with the appointments time. When I created a new appointment, the record in the database collection is correct, but will be displayed with the local offset time.
For example when I created an appointment which starts at 2 am it will be displayed as starting at 4 am.
Please check the attached archive, unzip it and run the normal commands: npm install, npm run server and npm start.

Best regards,

Mircea

Attachment: room_aa9831c3.zip


BS Balasubramanian Sattanathan Syncfusion Team January 6, 2020 12:55 PM UTC

Hi Mircea, 
 
Thanks for the update.  
 
We have validated your reported problem. Since we couldn’t reproduce the problem at our end. The shared sample is working properly and CRUD(create, update and delete) actions also working properly. Kindly share your time zone details for serve you better. 
 
Regards, 
Balasubramanian S 



MI Mircea January 6, 2020 03:17 PM UTC

Hi Sattanathan,
Yes, the CRUD operations are working properly but the displayed time is the problem.
For example I clicked to make a scheduled appointment between 1 and 1.30 am. When I saved it the appointment was displayed between 3 and 3.30 am (my local time is UTC +2 hours).
I attached images with my timezone, the mongodb collection and the displayed time appointment.

Thank you very much for your help,

Regards,

Mircea

Attachment: Pictures_89cca14b.zip


BS Balasubramanian Sattanathan Syncfusion Team January 7, 2020 03:22 PM UTC

Hi Mircea, 

Thanks for the update. 

Currently we are checking your shared details at our end and will update further details on January 8, 2020. We would appreciate your valuable patience until then. 

Regards, 
Balasubramanian S 



MI Mircea January 7, 2020 05:19 PM UTC

Hi Sattanathan,

I noticed that if I edited the same appointment without modifying anything, the time is updated with the local offset time.
So if the initial appointment is from 1 to 1.30 in the database and the displayed time is 3 to 3.30, if I am editing the appointment and just press Save without touching anything, the appointment will be displayed as starting from 5 to 5.30 and in the database the time is modified to 3-3.30. And so on....it is repetitive.
So it is a problem when the displayed time is saved to the database. Maybe the new versions of the mongodb client or angular, because your archive is working properly on the same computer.
Thank you very much for your help.

Regards,

Mircea


BS Balasubramanian Sattanathan Syncfusion Team January 8, 2020 03:16 PM UTC

Hi Mircea, 

Thanks for your valuable patience. 

We have modified our previously shared sample based on your requirement. In below project CRUD actions are working properly and as well as in db. For your reference, we have attached screenshot. Kindly refer it. 

   


Kindly try the above sample and let us know if you need any further assistance on this. 

Regards, 
Balasubramanian S 



MI Mircea January 8, 2020 06:31 PM UTC

Hi Sattanathan,

I tried your new settings (replacing the server.js file) but unfortunately it is worst. Now the difference between the time from the database and the displayed time is double the time zone difference.
For example when I tried to make an appointment for 9 am, in the database the time was recorded as 7am and the appointment was displayed as starting at 11 am (see the attachments).
Your sample was working correctly on the same computer with the same local MongoDB server (as the previous sample you sent to me). But both your samples are using :

Angular 5.2.0, "@syncfusion/ej2-angular-schedule""16.4.42" and "mongodb""^3.2.3".

But I am using:

 Angular 8.2.4,"@syncfusion/ej2-angular-schedule""^17.4.39" and "mongodb""^3.4.1".

Please use the same packages to reproduce the problem (or my archive I sent to you).

If you need more information to send to you, just say it.

Thank you for your help.

Regards,

Mircea






Attachment: new_651df10f.zip


BS Balasubramanian Sattanathan Syncfusion Team January 9, 2020 02:55 PM UTC

Hi Mircea 
  
Thanks for your update.  
  
We have checked your reported problem in Angular 8+ and mongoDb 3.4+. We could able to reproduce the problem at our end. Kindly remove the time zone offset conversion code like below sample and check at your end. We have modified our previously shared sample with latest version 17.4.41 and checked CRUD operations in it, now the problem is solved. We prepared video demo for your reference. 
 
 
Kindly try the above sample and let us know if you need any further assistance on this. 
  
Regards,  
Balasubramanian S 
 



MI Mircea January 9, 2020 09:20 PM UTC

Hi Sattanathan,

Please send me the link to the sample since both links you sent are the same and contain just a video.

Thank you for your help.

Regards,

Mircea


VM Vengatesh Maniraj Syncfusion Team January 10, 2020 05:50 AM UTC

Hi Mircea, 

Sorry for the inconvenience. 

You can get the sample from the below link. 


Kindly try the above sample and revert us for further assistance. 

Regards, 
Vengatesh 



MI Mircea January 10, 2020 01:50 PM UTC

Hi Vengatesh,

Now it is working....thank you very much...
During testing the your new sample I found some other problems and I do not know if I should put them here or open a new issue since the present title has nothing to do with these issues.
Anyway I will put them here for the moment:

1. I created a new Angular project to install the new Angular schedule package ( "@syncfusion/ej2-angular-schedule": "^17.4.41").
For the Angular version 8 now you can choose the style (css, scss, sass, less or stylus). It was first time when I chose scss style and the installation of the Angular Schedule had an error: "cannot find src/style.css file". The installation didn't stop so I did not notice that error until later when I wanted to start my project. My project started but the display was not rendered properly and I could not do any CRUD operations. I checked the problem and I noticed the package "@syncfusion/ej2-material-theme": "~17.4.39" was not installed together with the "@syncfusion/ej2-angular-schedule": "^17.4.41".
I was using "ng add  @syncfusion/ej2-angular-schedule" command .
So I think it's an installation problem.

Second: how can I choose the theme for the installation since I saw you have four of them:
  1. Google’s Material
  2. Microsoft Office’s Fabric
  3. Bootstrap
  4. High Contrast
 ?

2. During another test I wanted to use the Angular Schedule with Angular Universal and I noticed a big increase for the compilation time, from about 3 minutes to approximative 13-14 minutes.
I was using the following commands:

1. ng new rooms  
2. cd rooms
3. ng add @nguniversal/express-engine --clientProject rooms
4. npm run build:ssr && npm run serve:ssr

and the compilation time was about 3 minutes.

The second test I did with the following commands:

1. ng new rooms   
2. cd rooms
3. ng add @nguniversal/express-engine --clientProject rooms
4. ng add  @syncfusion/ej2-angular-schedule      
5. npm run build:ssr && npm run serve:ssr

and the compilation time was about 13-14 minutes. Every new compilation will take the same long time.

I noticed it took a long time doing the following:

92% chunk asset optimization TerserPlugin
92% chunk asset optimization cleancss-webpack-plugin

Maybe that help to find the problem.

Thank you very much for your help.

Regards,

Mircea





MI Mircea January 12, 2020 05:45 PM UTC

Hi Vengatesh,

I have another 2 questions:

3. I am trying to use a custom template for the Schedule Editor using


But I do not know how to map the field "TaskId" in the ng-template, so the room name field to appear in the Editor window.

4. How can I set the value for an Editor field, for example Subject field to have a fix value ?

Thank you very much for your help.

Regards,

Mircea



BS Balasubramanian Sattanathan Syncfusion Team January 13, 2020 12:40 PM UTC

Hi Mircea, 
 
Thanks for the update. 
 
Q1 :   
 
We have validated your reported scenario at our end. We suspect that, you have prepared sample by using Scheduler UG. If we install the package through following line “npm install @syncfusion/ej2-angular-schedule –save”, only the Scheduler and it’s dependent component package will be installed. Here, ej2 package is not installed. So that, the issue is occurred. Kindly use the below CSS in styles.css file to overcome the issue.   
  
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css';  
  
Kindly follow the below link and create Scheduler with Angular 8. If you still faced the reported problem at your end, kindly share the issue occurred project/clear replication steps/exact scenario for serve you better. We have prepared sample for your reference, please refer it. 
 
 
Q2 : 
The compilation time of the project depends on the project size. Even if there is a small change in the project, the hot reloading in angular triggers the compilation. So if the project size is large, then the compilation time will be longer. 
Q3 : 
 
We have prepared sample based on your requirement using popupOpen event like below code snippet. 
 
let roomElement: HTMLInputElement = args.element.querySelector('#RoomId'); 
      if (!roomElement.classList.contains('e-multiselect')) { 
        let roomObject: MultiSelect = new MultiSelect({ 
          placeholder: 'Choose a owner', 
          fields: { text: 'RoomText', value: 'Id' }, 
          dataSource: (this.roomDataSource as any), 
          value: <string[]>(((args.data as any).RoomId instanceof Array) ? (args.data as any).RoomId : [(args.data as any).RoomId]) 
        }); 
        roomObject.appendTo(roomElement); 
      } 
      let ownerElement: HTMLInputElement = args.element.querySelector('#OwnerId'); 
      if (!ownerElement.classList.contains('e-multiselect')) { 
        let ownerObject: MultiSelect = new MultiSelect({ 
          placeholder: 'Choose a owner', 
          fields: { text: 'OwnerText', value: 'Id' }, 
          dataSource: (this.ownerDataSource as any), 
          value: <string[]>(((args.data as any).OwnerId instanceof Array) ? (args.data as any).OwnerId : [(args.data as any).OwnerId]) 
        }); 
        ownerObject.appendTo(ownerElement); 
} 
 
Q4 : 
We have added ‘Enter some text’ as fixed value for Subject field in same popupOpen event like below code snippet. 
 
if (args.target.classList.contains('e-work-cells')) { 
        let subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement; 
        subjectElement.value = "Enter some text"; 
} 
 
 
Kindly try the above sample and let us know if you need any further assistance on this. 
 
Regards, 
Balasubramanian S


MI Mircea January 13, 2020 08:40 PM UTC

Hi Balasubramanian,

Thank you for your answers. I still need some clarifications.

Q1. Let me explain better the problem. 
When you run "ng new angular8-project", the Angular CLI will ask you:
"Which stylesheet format would you like to use?" with the following options: CSS , SCSS, Sass, Less, Stylus.
If you choose anything else than CSS will not be created any file "src/styles.css", so when I run next "ng add  
@syncfusion/ej2-angular-schedule" command it will appear that installation problem with missing src/styles.css.
In case I chose CSS it will not be any problem.
So my question is: what should I do if my anguar 8 project has SCSS, Sass, Less or Stylus stylesheet format ?
Am I forced to use CSS?
Your sample is using "src/styles.css" file, not "src/styles.scss" file, so it's no helpful.

Q2. It is normal that the compilation time of the project depends on the project size, but in case of my scenarios no new files were added o the Angular 8 project, just the default packages.
So please run the following scenario:
1. ng new rooms   
2. cd rooms
3. ng add @nguniversal/express-engine --clientProject rooms
The "rooms" folder contains now 33,089 Files, 4,034 Folders with 246 MB in total size on my computer.
4. Now run the compilation command: "npm run build:ssr && npm run serve:ssr" and count the time.
5. After that run the command "ng add @syncfusion/ej2-angular-schedule".
The "rooms" folder contains now 41,453 Files, 4,501 Folders with 346 MB in total size.
6. Now run the compilation command: "npm run build:ssr && npm run serve:ssr" and count again the time.
I did not modify any file and I did not add any other file.
The project has grown with 50% but the compilation time has grown 4 times in my case.
Is that normal?

Q3.-Q4 The sample is working as requested. I still have 2 small questions:
1. Is it possible to have focus to the second field in the Editor since the first field has a default value?
2. Now the Room field appear in the Editor, but with "1 selected" name instead of the real one (room 1, room2 etc).
In the Room Scheduler demo (https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource)
the name of the room appear as clear text which is better.

I have some other questions:

Q5. This question is coming from Q1. 
The command "ng add  @syncfusion/ej2-angular-schedule" will install the package "@syncfusion/ej2-material-theme": "~17.4.39".
But how can I install Angular Schedule with other built-in theme than Material? For example Bootstrap or High Contrast ....

Q6. How to open the Editor window with just one click (instead of the QuickInfo window)?
I saw the Vengatesh solution from 
https://www.syncfusion.com/downloads/support/forum/131799/ze/AppointmentWindowOnSingleClick-302453835 
but that was working for Angular 6, not 8 and it seems is using jQuery, so it is not good.

Q7. How to perform some actions automatically, for example sending a confirmation mail, after I added successfully an appointment?

Thank you very much for your help.

Regards,

Mircea
 


BS Balasubramanian Sattanathan Syncfusion Team January 20, 2020 12:55 PM UTC

Hi Mircea, 
 
Thanks for the update. 
 
Q1 - Q2:  
 
Currently, we are validating your reported scenario at our end and will update further details on January 21, 2020. Kindly be patience until then 
 
Q3 - Q4 : 
 
1. Is it possible to have focus to the second field in the Editor since the first field has a default value? 
 
We have validated your requirement and prepared sample using below code snippet. Kindly refer it. 
<input id="StartTime" class="e-field" type="text" name="StartTime" autofocus /> 
 
2. Now the Room field appear in the Editor, but with "1 selected" name instead of the real one (room 1, room2 etc). 
In the Room Scheduler demo (https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource) 
the name of the room appear as clear text which is better. 
  
We could able to face your reported problem at our end. And we suggest you to use below code snippet to overcome the reported problem. 
var dialog = (args.element as any).ej2_instances[0]; 
dialog.open = function () { 
      (args.element.querySelector('.e-schedule-dialog #RoomId') as any).ej2_instances[0].refresh(); 
      (args.element.querySelector('.e-schedule-dialog #OwnerId') as any).ej2_instances[0].refresh(); 
}; 
 
 
Q5 : The command "ng add  @syncfusion/ej2-angular-schedule" will install the package "@syncfusion/ej2-material-theme": "~17.4.39". 
But how can I install Angular Schedule with other built-in theme than Material? For example Bootstrap or High Contrast .... 
 
We can use different themes for Scheduler component. For example, If we want to use fabric theme, we need to change the below path name as fabric.css instead of material.css. 
 
   
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css';   
 
For your reference, we have attached screenshot of supported themes for Scheduler. 
 
 
 
Q6 : How to open the Editor window with just one click (instead of the QuickInfo window)? 
 
Kindly refer the below KB link for your requirement.  
 
 
Q7 : How to perform some actions automatically, for example sending a confirmation mail, after I added successfully an appointment? 
 
Based on your requirement, we have prepared sample using actionComplete event. Kindly refer the below links 
 
 
Regards, 
Balasubramanian S


MI Mircea January 21, 2020 07:28 PM UTC

Hi Balasubramanian,

Thank you very much for your answers and these are mine:

Q1-Q2. Thank you, I am waiting.

Q3-Q4. 1. It is working. Done.
             2. It is working. Done.

Q5.  It is working. Done.
Please modify the documentation since modifying the theme is not mentioning anywhere as in 
https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/?no-cache=1
or
https://ej2.syncfusion.com/angular/documentation/appearance/theme/?no-cache=1

Q6. I adapted your example for Angular and I was using the following function to implement one click opening for the Editor:

 public onPopupOpen(args: PopupOpenEventArgs): void {
     if (args.type == 'QuickInfo') {
      let dialogObj = (args.element as any).ej2_instances[0];
      dialogObj.hide();
      let currentAction: CurrentAction = args.target.classList.contains("e-work-cells") ? "Add" : "Save";
      this.scheduleObj.openEditor(args.data, currentAction);
    }
  }

But no success. I am using Angular 8.2 (latest). 

Also on the mobile I could not open the Editor even with the double click (double tap screen).

Q7. It is working. Done.

I have some other questions:

Q8. I would like to be able to have custom validations, not just "required: true" as in the 

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#apply-validations-on-editor-template-fields 

Validation examples could be:  minimum and maximum number of characters, if the input is number or string, or to validate an e-mail address.

The error messages should be accordingly with the required validation.

Is it possible these validation to occur per field, not at the end when the Save button is pressed?

Q9. Can we block the calendar to browse for the past events (to display just today and future days)?

Using minDate will block the appointments for the current day (today).

Q10. How can I format the column headers (room1, room2 etc) and the row headers ( hours) ? Because for example 10.30 am is not displayed full on mobile ...

Thank you for your help.

Regards,

Mircea




VM Vengatesh Maniraj Syncfusion Team January 22, 2020 10:42 AM UTC

Hi Mircea, 

Thanks for the update. 
 
Q1 : 
Currently we don’t have the support for handling other stylesheet format other than CSS in ng add. We have validated the reported issue and we considered this as a feature in our end. We have created a report for “Error thrown when installing packages using ng add” and please track this by below feedback link. 


Q2 :  
The schedule component has many dependencies. While building the project, all dependencies of the schedule component will build and tree shaking will be done for all dependencies. Because of this, the compilation time is getting longer. It is a default behavior of the Scheduler component. 

Q5 :  
We are consider this documentation improvement and we will refresh the changes in our upcoming main release. 

Q6 : 
We have validated your requirement in Angular 8 and prepared sample using popupOpen event like below code snippet. Since which is working properly at our end. Kindly try the below sample and let us know If you have any queries.  

onPopupOpen(argsPopupOpenEventArgs): void { 
    if (args.type === 'QuickInfo') { 
      const dialogObj = (args.element as any).ej2_instances[0]; 
      dialogObj.hide(); 
      const currentAction = args.target.classList.contains("e-work-cells") ? "Add" : "Save"; 
      this.scheduleObj.openEditor(args.datacurrentAction); 
    } 
} 

 
Q8 : 
We have validated your requirement and prepared sample based on that using popupClose event like below code snippet.  

public customFn(args: any): Boolean { 
    // It allows to select the date only a year in 2018 
    return (new Date(args.element.value).getFullYear() === 2018); 
  }