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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150195 Dec 25,2019 07:25 AM UTC Feb 5,2020 06:33 AM UTC Angular - EJ 2 32
loading
Tags: Schedule
Mircea
Asked On December 25, 2019 07:25 AM UTC

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.



Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


Mircea
Replied On 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

Vengatesh Maniraj [Syncfusion]
Replied On 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 


Mircea
Replied On 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


Balasubramanian Sattanathan [Syncfusion]
Replied On 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

Mircea
Replied On 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


Mircea
Replied On 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

Balasubramanian Sattanathan [Syncfusion]
Replied On 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 


Mircea
Replied On 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

Balasubramanian Sattanathan [Syncfusion]
Replied On 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 


Mircea
Replied On 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

Balasubramanian Sattanathan [Syncfusion]
Replied On 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 


Mircea
Replied On 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

Balasubramanian Sattanathan [Syncfusion]
Replied On 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 
 


Mircea
Replied On 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

Vengatesh Maniraj [Syncfusion]
Replied On 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 


Mircea
Replied On 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




Mircea
Replied On 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


Balasubramanian Sattanathan [Syncfusion]
Replied On 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

Mircea
Replied On 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
 

Balasubramanian Sattanathan [Syncfusion]
Replied On 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

Mircea
Replied On 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



Vengatesh Maniraj [Syncfusion]
Replied On 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); 
  } 
 
  onPopupClose(args: PopupCloseEventArgs): void { 
    if (args.type === 'Editor') { 
      var letters = /^[A-Za-z]+$/; 
      var firstChar = (args.data as any).Subject.charCodeAt(0); 
      if (!(args.data as any).Subject.match(letters)) { 
        alert('Please enter alphabets only'); 
        args.cancel = true; 
      } 
    } 
} 
 
 
Q9 : 
We can disable the past dates using popupOpen, eventRendered, actionBegin and renderCell events like below code snippet. Kindly refer and follow the below sample. 

public onPopupOpen(args: PopupOpenEventArgs): void { 
    if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) { 
      args.cancel = this.onEventCheck(args); 
    } 
  } 
  public onEventRendered(args: EventRenderedArgs): void { 
    args.cancel = this.onEventCheck(args); 
  } 
  public onActionBegin(args: ActionEventArgs): void { 
    if ((args.requestType === 'eventCreate') || args.requestType === 'eventChange') { 
      args.cancel = this.onEventCheck(args); 
    } 
  } 
  public onEventCheck(args: any): boolean { 
    let eventObj: any = args.data instanceof Array ? args.data[0] : args.data; 
    let currentDate: Date = new Date(new Date().setHours(0, 0, 0, 0)); 
    let eDate: Date = new Date(new Date(eventObj.StartTime).setHours(0, 0, 0, 0)); 
    return (eDate < currentDate); 
  } 
  public onRenderCell(args: RenderCellEventArgs): void { 
    let currentDate: Date = new Date(new Date().setHours(0, 0, 0, 0)); 
    let eDate: Date = new Date(new Date(args.date).setHours(0, 0, 0, 0)); 
    if (args.elementType == "dateHeader" || args.elementType == "workCells") { 
      if (eDate < currentDate) { 
        args.element.classList.add('disable-dates'); 
      }  
    } 
} 


 
Q10 :  
We can format the resource column headers using resourceHeaderTemplate property and also we can change the timeslots using timescale property of the Scheduler. Kindly refer the below sample and UG links for more details. 
 
resourceHeaderTemplate : 

Kindly try the above links and samples, please let us know if you have any concerns. 
 
Regards, 
Vengatesh 


Mircea
Replied On January 23, 2020 09:32 PM UTC

Hi Vengatesh,

Thank you very much for your answers, they are very useful. Here are my results:


Q1. OK, I will use the standard installation way.  Make sure the new feature will be able to distinguish between the src/style.css and src/style.scss and add the appropriate style files.
Q2. By chance I just found the problem: it is the webpack-cli package. In my case upgrading from package   "webpack-cli": "^3.1.0" (installed by the Angular Universal) to package   "webpack-cli": "^3.3.10" (latest) solved the compilation speed problem.

Q5. It will be useful to mention in the documentation what to do with the package "@syncfusion/ej2-material-theme" (installed with ng add) when you change form Material to other build-in theme as Fabric and the package will be useless.

Q6.  After many tests I found the problem with one-click: there is an incompatibility between 

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.data, currentAction);
    }

and

 if (args.type === 'Editor') {

      if (args.target.classList.contains('e-work-cells')) {
        let subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement;
        subjectElement.value = "Enter some text";
      }
    }
when you put both in the "onPopupOpen(args: PopupOpenEventArgs)" function.


You will get the following error:

"ERROR TypeError: Cannot read property 'classList' of undefined  at AppComponent.onPopupOpen "

And I noticed something very confusing about the property "showQuickInfo": 

- if you add "[showQuickInfo]='showQuickInfo' " in the template with  " public showQuickInfo: Boolean = false;" in the component,  the one-click is disabled but the error "ERROR TypeError: Cannot read property 'classList' of undefined  at AppComponent.onPopupOpen " dissapeared.
- if you delete "[showQuickInfo]='showQuickInfo' " from the template the one-click is working, but you will have the error "ERROR TypeError: Cannot read property 'classList' of undefined  at AppComponent.onPopupOpen ".

Q8. Your example is very good for the standard Editor fields, but I need validations for the Editor custom template fields as:

let validator: FormValidator = ((formElement as EJ2Instance).ej2_instances[0] as FormValidator);
      validator.addRules('Email', { required: true });

How can I add extra validators to validate the input as an email address?

And second: in your example the validation process will run when you press the Save button. But when you have many fields will be very useful to validate each field individually before reach the end of the form. For example validate the Subject input before go to the next Location field.

Q9.  The same incompatibility if you add the one-click Editor code:

"ERROR TypeError: Cannot read property 'classList' of undefined  at AppComponent.onPopupOpen "

when you use the function

public onPopupOpen(args: PopupOpenEventArgs): void { 
    if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) { 
      args.cancel = this.onEventCheck(args); 
    } 
 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.data, currentAction);
    }
  } 

It's true I cannot add new appointments in the past,  but the Editor is opening and you are allowed to input data without being able to save it. It is more normal to have a modal or a notification and block to display any Editor or QuickInfo when the appointment time is in the past.
And it will be more convenient to block calendar browsing for the past days, something how is doing the minDate option.

Q10. I should be more clear.  I attached two images for the same page: "mobile view" when the page is displayed on mobile phone and "desktop view" when the same page is displayed on my laptop.
It has a time slot of 90 minutes. As you can see the time slots are displayed OK on the laptop but not on the mobile phone.
( 1 PM instead of 1:30 PM ). I would like to enlarge the cell to display correctly and completely  the time.
About formatting the cells: I would like to center column head ("Sat 25") but I do not know how to access the header to style it.

Thank you very much for your help.

Regards,

Mircea


Attachment: Pictures_769e28bc.zip

Balasubramanian Sattanathan [Syncfusion]
Replied On January 24, 2020 08:51 PM UTC

Hi Mircea, 
 
Thanks for the update. 
 
Q1 :  
Yes. The feature will be able to distinguish between the style formats 
 
Q2 : 
We're happy you've found the solution to reduce the compilation time. 
 
Q5 : 
Yes. It will be useful and we will consider this as document improvement. 
 
Q6, Q8, Q9 : 
We have analyzed your query 6, 8 and 9 and prepared a sample based on that all requirement using popupOpen event like below code snippet.  
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); 
    } 
    if (args.type === 'Editor') { 
      const formElementHTMLElement = args.element.querySelector('.e-schedule-form'); 
      const validatorFormValidator = ((formElement as EJ2Instance).ej2_instances[0as FormValidator); 
      validator.dataBind(); 
      // To open editor window with fixed value 
      const subjectElementHTMLInputElement = args.element.querySelector('#Subject'as HTMLInputElement; 
      subjectElement.value = (args.data as any).Subject || 'Enter some text'; 
 
      const emailElementHTMLInputElement = args.element.querySelector('#Email'as HTMLInputElement; 
      emailElement.value = (args.data as any).Email || ''; 
      // To email address validation 
      validator.addRules('Email', { email: [true] }); 
      const statusElementHTMLInputElement = args.element.querySelector('#EventType'as HTMLInputElement; 
      if (!statusElement.classList.contains('e-dropdownlist')) { 
        const dropDownListObjectDropDownList = new DropDownList({ 
          placeholder: 'Choose status'value: statusElement.value, 
          dataSource: ['New''Requested''Confirmed'] 
        }); 
        dropDownListObject.appendTo(statusElement); 
        statusElement.setAttribute('name''EventType'); 
      } 
      const startElementHTMLInputElement = args.element.querySelector('#StartTime'as HTMLInputElement; 
      if (!startElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 
      } 
      const endElementHTMLInputElement = args.element.querySelector('#EndTime'as HTMLInputElement; 
      if (!endElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 
      } 
    } 
} 
 
 
Kindly try the above sample and let us know if you need any further assistance on this. 
 
Q10 :  
Currently we are validating the reported scenario at our end and will update further details on January 27, 2020. We would appreciate your valuable patience until then. 
 
Regards, 
Balasubramanian S 


Mircea
Replied On January 25, 2020 07:42 PM UTC

Hi Balasubramanian,

Thank you very much for your answers and here are my test results:

Q1. I was trying to manually install the angular-schedule package with “npm install @syncfusion/ej2-angular-schedule –save”. My angular project has styles.scss, so I was trying to add
 @import '../node_modules/@syncfusion/ej2-base/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.scss';

files which I have in my node_modules folder.
The compilation process failed with the following error;

ERROR in ./src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import 'ej2-icons/styles/material.scss';
@import 'material-definition.scss';
@import 'all.scss';

       ^
      Can't find stylesheet to import.
  ╷
1 │ @import 'ej2-icons/styles/material.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@syncfusion\ej2-base\styles\material.scss 1:9  @import
  stdin 1:9                                                   root stylesheet
      in C:\\room\node_modules\@syncfusion\ej2-base\styles\material.scss (line 1, column 9)

If I use the css versions the compilation was OK.

Q2. Yes, I reduced the compilation time, but it's still very high because of the size of the syncfusion packages. If you use      webpack-bundle-analyzer for the main-es2015.js package with a 6.4 MB total size, you will see that the @syncfusion packages will be ~ 4.3 MB size while @angular packages have ~ 2 MB size. Can you confirm these are the expected sizes?

Q6-Q9. It is true there are no errors now when I remove any code which contains "if ((!args.target.classList.contains" and the one-click is working. This is causing unexpected problems. For example in process of removing that code I deleted also
this part:

  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: (((args.data as any).RoomId instanceof Array) ? (args.data as any).RoomId : [(args.data as any).RoomId])
        });
        roomObject.appendTo(roomElement);
      }

from your  Sample for Q3 – Q4 : https://stackblitz.com/edit/angular-2cnrxw-rjmepx?file=app.component.ts 

in that moment the autofocus was not working anymore !

And I understand we can rewrite the any code containing "if ((!args.target.classList.contains" to implement one-click Editor,
but what is happening with this code:

 if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) {
      args.cancel = this.onEventCheck(args);
    }

which I need for Q9 and did not appear in your response? How can be rewritten?

Yes, I implemented minDate to block calendar browsing, but I was forced to put minDate as "CurrentDate -1" , otherwise the user is blocked to add appointments to the current day entirely (which is not good). But using minDate as "CurrentDate -1" will allow the desktop users to browse for yesterday events which is not very desirable. And the mobile phone users will be able to browse all the past days which is not consistent behaviour, it is true without be allowed to add new appointments.
In my opinion it should exist a directive or something in the API to block entirely the calendar browsing older than a selected date.

Q8. The email validator is working, but how many build-in validators exist as  "validator.addRules('Email', { email: [true] }); "
and where can I found them?
Q10. I am waiting for your validation.  I was using " public currentView: View = 'Day';  " in my scenario. 
But I noticed also on the mobile phone just the first room name is displayed and the user has to tap the hamburger icon to be able to select a different room. This icon is not a very good choice since the hamburger icon is mainly used for menu items and it is not intuitive for the users. More convenient is to have a dropdownlist and a label in front like "Pick the room".

I have another small questions:
Q11. Where can I find details about Schedule API or other API to not bother you about different issues?
For example "if ((!args.target.classList.contains" can have different values as 'e-work-cells' or 'e-appointment' but I have no clue how many defaults values are and what it means.
Q12. How can I display the Subject field or any field with a fixed value as disabled in the Editor to not let users to modify that value?

Thank you very much for your help.

Regards,

Mircea


Mircea
Replied On February 2, 2020 09:30 AM UTC

Hi Balasubramanian,

Working with Schedule I noticed another issues:

Q13. When the time slot is 90 minutes the DragAndDrop is not working properly. You can drag the appointments just for slots which is starting with 00 minutes, I mean 1:00 , 2:00 and so on. For example you can drop an appointment for a time slot just for 4:00 or 5:00, not 4:30, even if you initial appointment was starting at 1:30 .

Q14. DragAndDrop is not working properly on the mobile when you initialize the DragAndDrop service at the app.component level (app.component.ts). If you initialize the DragAndDrop service at the module level (app.module.ts ), it is working properly. What is the correct way to initialize the Schedule services in general? Because in the official guide the initialization is done at the component level, but in your samples is done at the module level...

Q15. The QuickInfo window on mobile for an existing appointment is opening at the top of the window. If you have a big menu bar (with big height), the Quickinfo window is hidden behind the menu bar and you do not have access to the QuickInfo and Editor. And it is almost impossible to close the QuickInfo window. And second: is it possible to open the Editor with a long tap or double tap (instead of QuickInfo) ?

Thank you very much for your help.

Regards,

Mircea

Balasubramanian Sattanathan [Syncfusion]
Replied On February 3, 2020 12:49 PM UTC

Hi Mircea, 

Thanks for your update and being patience. 

Q1 :  
We have checked the reported issue and it occurs because of the “stylePreprocessorOptions” option is not added in angular-cli.json file.  
If you are having angular-cli version 8 and trying to use SASS files in angular project, node-sass is required.  

Please refer the below documentation for more details. 
 
Q2 : 
The size of the Syncfusion packages depends on the list of components used in the project and its loaded modules. Since you’ve mentioned size are expected size of the Syncfusion Scheduler package. 
 
Q6, Q9 :  
Kindly refer the below shared sample. In that, one click with event editor is working properly with no errors at our end. If you still faced the reported problem, kindly share the exact scenario of your requirement/replication steps/workable sample(if possible) for serve you better.  

For minDate related query : 
If we give new Date() as minDate, it will be consider current system time too. So that current Date is disabled in our scenario. So that, we suggested you to use “currentDate-1” to achieve the requirement. Instead of that, We can achieve by resetting the time like below code. 
public minDateDate = new Date(new Date().setHours(0000)); 
public selectedDateDate = new Date(new Date().setHours(0000)); 

For autofocus related query : 
Kindly try the below code in editor template, it will be auto focused whenever we open the editor window. 
<tr> 
    <td class="e-textlabel">Email</td> 
       <td colspan="4"> 
        <input id="Email" class="e-field e-input" type="text" value="" name="Email" style="width: 100%" autofocus /> 
    </td> 
</tr> 
 
Q8 : 
We are happy that the solution is working at your end. Kindly refer the below links for more details 
 
Q10 : 
The Scheduler resource names are displayed as menu list by default in mobile mode. Which can be viewed from using that hamburger icon. Since it is default behavior of the Scheduler in mobile mode. If you want to use Scheduler mobile mode as same as the desktop mode, kindly use enableCompactView as false like below code. 
public group: GroupModel = { 
    resources: ['Categories'], enableCompactView: false 
}; 
 
 
Q11 : 
We can refer the Scheduler API’s and documentation using below links. 
 
Q12 :  
We can disable the field with the fixed value like below code snippet. 
const reasonElementHTMLInputElement = args.element.querySelector('#Description'as HTMLInputElement; 
reasonElement.value = 'This is not an editable field'; 
reasonElement.setAttribute('disabled''true'); 
 
Q13 & Q14: 
We have checked your reported problem at our end using below sample. Since which is properly working. Kindly reproduce the issue in below sample/ video demo for serve you better. 

 
Q15:  
Currently, we have validating your reported scenario at our end and will update further details on February 4, 2020. Kindly be patience until then. 
 
 
All your queries has been resolved in above sample. So kindly try the above sample and let us know if you have concerns. 

Note : Kindly create a new support incident under your account and please follow the incident for further assistance.  

Regards, 
Balasubramanian S 


Mircea
Replied On February 3, 2020 11:30 PM UTC

Hi Balasubramanian,

You are right, the issue became too big and it is confusing. I will open a new ticket.

Regards,

Mircea

Vengatesh Maniraj [Syncfusion]
Replied On February 4, 2020 04:52 AM UTC

Hi Mircea, 

Thanks for the update and thanks for accepting our request. 

Please get in touch with us if you would require any further assistance. 

Regards, 
Vengatesh 


Mircea
Replied On February 4, 2020 05:16 AM UTC

Hi Vengatesh,


for the remaining issues.

Thank you very much for your help.

Regards,

Mircea

Vengatesh Maniraj [Syncfusion]
Replied On February 5, 2020 06:33 AM UTC

Hi Mircea, 

Thanks for the update. 

You are most welcome. 

Regards, 
Vengatesh. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon