Our pure JavaScript Scheduler component


Post by manuraj.singh »

Hello,

We are interested in Scheduler Component with following requirements

Date Agnostic View i.e. Need to Schedule events without date context.
For example:
Event 1 on Day 1 Between 10:00 and 11:30 at Gym Taught by Physical Instructor
Event 2 on Day 1 Between 13:00 and 14:00 at Swimming Pool Taught by Swimming Instructor
Event 3 on Day 2 Between 07:00 and 14:00 at Stadium
& so on.

Is it possible to achieve this view in your Angular Scheduler Component.

Thanks.


Post by mats »

Yes very easy, you can render anything you want into the schedule time axis header cells so you can have a dummy date set as the start of the timeline and just output time axis relative to that. Recommended reads:

https://bryntum.com/docs/scheduler/#Scheduler/preset/ViewPreset
https://bryntum.com/docs/scheduler/#Scheduler/preset/ViewPresetHeaderRow


Post by manuraj.singh »

Thanks Mats

That was useful. I was able to change look and feel in code pen.

As I a creating Angular project, I am attempting to setup the example Trial that I downloaded from Bryntum.

I have followed guide to download dependencies.... issue however is that after downloading
"@bryntum/demo-resources": "1.0.1",
"@bryntum/scheduler": "npm:@bryntum/scheduler-trial@4.1.0",

"@bryntum/scheduler-angular": "4.1.0",

fails to download informing ---erroring

npm ERR! code E403
npm ERR! 403 403 Forbidden - GET https://npm.bryntum.com/tslib - user manuraj.singh..jmlsoftware.co.uk is not allowed to access package tslib
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.
npm ERR! 403
npm ERR! 403 It was specified as a dependency of '@bryntum/scheduler-angular'
npm ERR! 403

It has all the dependencies but that one.

Please help so that I can trial it with Angular

Thanks.


Post by sergey.maltsev »

Hi!

According to our guide https://www.bryntum.com/docs/scheduler/#guides/npm-repository.md you should use this code to set repository for @bryntum packages:

Probably you have made a mistake here and switched common npm registry to https://npm.bryntum.com

Please try this before configuring again

npm config delete registry

For npm version 6.x use:

$ npm config set @bryntum:registry https://npm.bryntum.com
$ npm login --registry=https://npm.bryntum.com

For npm version 7.x use:

$ npm config set @bryntum:registry=https://npm.bryntum.com
$ npm login --registry=https://npm.bryntum.com

Check installed npm version with:

$ npm -v

If this doesn't help please attach what this command shows:

npm config list

Post by manuraj.singh »

Thank sergey.maltsev. I was able to resolve this one eventually.

Problem now is that event though I was able to do so. Chrome is giving me rendering issues while Firefox appears to be working fine.

Note that I am using Angular 11.

Is there a proper Scheduler Pro that I can trial (with probably trial licence) rather than using trial version of Scheduler and Angular Scheduler.

Putting this on context, I am trying to compare a number of products for same functionality and having the one with (trial features not working in Chrome and limited debugging capabilities) is making the products not at par with the others to properly evaluate.

Thanks.


Post by sergey.maltsev »

Hi!

Please create a new post with the problem related to the exact issue you have.
Don't add all issues you have to one post so we can handle each separately.
Also please attach app which we can build and check.


Post by manuraj.singh »

Hello Sergey Maltsev

Apologies about earlier mix up of topics. I have found that the issue was on older version of Chrome (MAC and Windows). Updated newer version of Chrome has no rendering issue.

Continuing still with Date Agnostic Capability, I am attaching my project created using Angular 11 where I have update View Preset to show me Day 1 instead of date. I am also attaching the Mock up indicating what I am trying to achieve. The requirement is still as I mentioned at the beginning of the topic.

I would appreciate to get views from your team regarding my requirment.

Thanks.

Attachments
Mockup
Mockup
Mock Up Date Agnostic Scheduler.png (29.62 KiB) Viewed 901 times
tester.7z
Project cretaed using Angular 11.
(113.86 KiB) Downloaded 72 times

Post by pmiklashevich »

Hello,

You configured scheduler to show resources at the top (vertical mode). According to your screenshot, you need calendar mode. For that there is a separate product called Calendar. Please see the demo https://bryntum.com/examples/calendar/basic/

You can configure the renderer of the header cells like this:

// Basic demo
new Calendar({
    modes : {
        week : {
            allDayEvents : {
                dayCellRenderer : function({ columnIndex }) {
                    return `Day ${columnIndex + 1}`;
                }
            }
        }
    }

https://www.bryntum.com/docs/calendar/#Calendar/view/Calendar#config-modes
https://www.bryntum.com/docs/calendar/#Calendar/widget/WeekView#config-allDayEvents
https://www.bryntum.com/docs/calendar/#Calendar/widget/CalendarRow#config-dayCellRenderer

Снимок экрана 2021-04-19 в 11.47.31.png
Снимок экрана 2021-04-19 в 11.47.31.png (148.42 KiB) Viewed 884 times

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply