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

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.

https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/

Then include the resource code like below to render the Scheduler like online Room Scheduler sample.

https://ej2.syncfusion.com/angular/documentation/schedule/resources/#customizing-resource-header-with-multiple-columns

We have prepared the below sample for the same for your reference. Kindly use npm install and start commands.

https://www.syncfusion.com/downloads/support/forum/150195/ze/Sample1879060404

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.

http://www.syncfusion.com/downloads/support/forum/143958/ze/ScheduleSample491785931

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:

Run MongoDB and create the collection named ‘ScheduleData’ in ‘mydb’ database.
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.

Sample : https://www.syncfusion.com/downloads/support/forum/150195/ze/sample1589747769.zip

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.

Sample : https://www.syncfusion.com/downloads/support/forum/150195/ze/sample-1469986948

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.

Video demo : https://www.syncfusion.com/downloads/support/forum/150195/ze/schedule_video_demo1477915265.zip

Sample : https://www.syncfusion.com/downloads/support/forum/150195/ze/schedule_video_demo1477915265.zip

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.

Sample: https://www.syncfusion.com/downloads/support/forum/150195/ze/sample118824569.zip

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:

Google’s Material
Microsoft Office’s Fabric
Bootstrap
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

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/?_ga=2.30736633.778328218.1578237369-161393944.1576448368#customizing-event-editor-using-template

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.

UG : https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/

Sample : https://www.syncfusion.com/downloads/support/forum/150195/ze/ang_schedule_sample-1589440449.zip

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";

}

Sample for Q3 and Q4 : https://stackblitz.com/edit/angular-2cnrxw-ld4ots?file=app.component.ts

popupOpen event : https://ej2.syncfusion.com/angular/documentation/api/schedule/#popupopen

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.

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();

};

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

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.