Callendar customisation possible ?

[item]

Hello,
just a question for front-end specialist.

is there a way to customise in uprade save the calendar.
as i know, it's fullCalendar, and one of option i need to have is : https://fullcalendar.io/docs/hiddenDays
and another, slot from 6am to 21pm.

i have search "hiddenDays" to all espocrm folder.. and found some place, but i think, it's compiled file? no knowledge.

best regards

[telecastg]

Hello @item

I don't have any experience customizing the fullcalendar library, but if you are able to change the settings there, you could upload a customized version of the library (for example "myfullcalendar") and I believe that it would be possible (not tested) to substitute the out of the box library in an upgrade safe way as follows:

1) Load the customized version of fullcalendar as client/custom/lib/myfullcalendar.js

2) Let the system know that it should use the custom library instead of the out of the box library.

custom/Espo/Custom/Resources/metadata/app/jsLibs.json

{
    "full-calendar": {
        "path": "client/custom/lib/myfullcalendar.js",
        "devPath": "client/custom/lib/myfullcalendar.js",
        "exportsTo": "$.fn",
        "exportsAs": "fullCalendar",
        "sourceMap": true
    }
}

Best Regards

[item]

hum,
i have seach more, and Calendar have view : espocrm/client/modules/crm/src/views/calendar/
i have make some changement but no luck.

but for me, it's so, no easy customisation for me. (your post)

So i know, user say me : we don't work Saturday, Sunday, why you display that !
i will say : WTF

as Yuri have post : https://medium.com/swlh/stop-adding-...ct-bed86aa5114

really i nice write
else .. many issue for maintain.

Best Regards

[telecastg]

Sometimes dismissing possible innovations can lead to bad decisions:

The Apple Watch has become one of the most popular smartwatches on the market, with sales figures continuing to rise year after year. According to BusinessofApps, Apple sold approximately 33.9 million watches in 2020 alone and generated an estimated revenue of $12.6 billion from its watch sales that same year.

Can you imagine what would have happened if Apple had listened to this "expert" advise ? https://medium.com/swlh/stop-adding-...ct-bed86aa5114

My philosophy is that if a feature can improve the user experience and or reduce time and errors in data entry, it will generally pay for itself.

Best Regards

[item]

Lol telecastg,
i can explain so the Apple Watch.
Last year, my boss offer me apple watch (i think number 7 and i think +-900euro) .. yes, we have participate too billion revenue of Apple... but you know how many time i have apple watch in my hand ?
maybe in 1 year, only 7 day

I think the expert differenciate the utility and non utility.
Apple is a great society, he make billion revenue with a non utility object

PS : on office, we are all on Apple, and i am too Apple addict but somethime it's crazy apple.

Best Regards

[telecastg]

I completely agree that the innovation MUST have a practical utility.

I have never owned an apple watch and would not buy one because it has no utility for me

Best Regards

[esforim]

Interesting trickery, have you tested it item? Does it work by changing filepath or will we need to code more?

[item]

Hi,
this is not upgrade save, but this add next previous button to timeLine

client/modules/crm/src/view/calendar/timeline.js

// to add in events:{ line 63+- 
'click button[data-action="prev"]': function () {
                this.actionPrevious();
                },
            'click button[data-action="next"]': function () {
                this.actionNext();
            },​

.....
// EXIST, but i have add (24 * 3600) ?
actionPrevious: function () {
            this.timeline.moveTo(this.timeline.range.start - (24 * 3600) );
            this.triggerView();
        },


        actionNext: function () {
            this.timeline.moveTo(this.timeline.range.end + (24 * 3600) );
            this.triggerView();
        },​ 

client/modules/crm/res/templates/calendar/timeline.tpl

// Just add this line 6+-
        <div class="btn-group range-switch-group">
            <button class="btn btn-text btn-icon" data-action="prev"><span class="fas fa-chevron-left"></span></button>
            <button class="btn btn-text btn-icon" data-action="next"><span class="fas fa-chevron-right"></span></button>
        </div>​ 

Next step, make this upgrade safe
Mabe pull request in septembre.

[item]

Hello telecastg

        <div class="btn-group range-switch-group">
            <button class="btn btn-text btn-icon" data-action="prev"><span class="fas fa-chevron-left"></span></button>
// <button type="button" class="btn btn-default btn-icon date-picker-btn" tabindex="-1" data-action="moveTo"><i class="far fa-calendar"></i></button>
            <button class="btn btn-text btn-icon" data-action="next"><span class="fas fa-chevron-right"></span></button>
        </div>​​ 

i have the line in comment here for highlight, i have a datePicker logo


i have add this : in timeline.js

            'click button[data-action="moveTo"]': function () {
                this.actionMoveToDate();
                },​
.....
....
        actionMoveToDate: function () {
           console.log('moveToDate');  
        },​


        actionPrevious: function () {
            //this.timeline.moveTo(this.timeline.range.start);
            this.timeline.moveTo( this.start.add(-1, 'day') );
           ;
            this.triggerView();
        },

        actionNext: function () {
            //this.timeline.moveTo(this.timeline.range.end);
            this.timeline.moveTo( this.end.add(1, 'day') );
            this.triggerView();
        },​ 

when i click the "date picker" .. i have the event and on console i have result "moveToDate" but i have not the date picker popup. (choose date)

I think, as we have many tpl, edit, detail.. i don't know witch one i need to copy for have the datePicker let me choose the "date".. then handle the event and just need : this.timeline.moveTo( newDate );

i have not this in resume :



Any idea ?

Many Thanks

[item]

progress , now the datepicker show.. but do not close after click .. else work like a charm

'click button[data-action="moveTo"]': function (e) {
                //console.log(e);
                
                let element = $(e.currentTarget).datepicker('show');
                let self = this;
                $(e.currentTarget).datepicker().on('changeDate', function(e){
                        self.actionMoveToDate( e.date );
                });
            },​ 

actionMoveToDate: function (date) {
            
            console.log(date);
            this.timeline.moveTo( date );
            this.triggerView();
        },​ 

certainly a pull request.. really nice work if auto-close after select de date on date-picker

one default; first time, we need to click 2 time for the datepicker show. certainly need add event-listener another place

[yuri]

I will think about timepicker. I remembed I considered it before but didn't opt to implement it for some reason. I plan to upgrade the timeline lib first. I didn't upgrade it for long as there was a huge performance drop in newer versions. Hope they fixed it.

BTW, in the future, changes in core JS files won't work. They way as it's for any modern web app.

[yuri]

Next/Prev are stepping by 1 day. The timeline can show 1 week range, or even more. In this case switching by 1 day would be not practical, rather something that users may perceive as a bug.

You can already use shortcut keys left/right.

[item]

Many Thanks Yuri,
yes i have see, 98% is implemented but just 3 lines of code

Ours case, TimeLine is more for "shared teams calendar timeline", so there are many events (meeting). One day is perfect for us and the date-picker to jump to a day.

oh, i have forget shorcut.

Thanks.

[yuri]

Can you imagine what would have happened if Apple had listened to this "expert" advise ?

Quoting the word 'expert' was unnecessary. One of the main points is about focusing on improving existing features rather than bloating with new ones.

Apple tend to be quite lean and don't feature bloat as far as I know. We should differentiate new products and existing ones. If you start a new one, you are free to experiment. If you maintain a big existing one, it's another story. Anything you add to the product, can't be easily undone.

> it will generally pay for itself.

You can add a feature needed by 1% of users, bringing very small additional revenue, but your team will spend time supporting and maintaining it and you need to pay for this time. You might need to sell much more to justify this feature.

Let alone new users may be overwhelmed with an immense amount of tools and opt to a simplier product. The reason users were choosing Espo in early days.

Example of feature bloated products: Magento.

[telecastg]

> it will generally pay for itself.

You can add a feature needed by 1% of users, bringing very small additional revenue, but your team will spend time supporting and maintaining it and you need to pay for this time. You might need to sell much more to justify this feature.

Let alone new users may be overwhelmed with an immense amount of tools and opt to a simplier product. The reason users were choosing Espo in early days.

That may be right from your point of view as the platform owner and developer, but for others like me and other participants, who's job is to customize or adapt the platform to benefit their clients/users, simply stating: "@yuri does not think that this is a relevant feature or it will be hard and costly for Espo to maintain", as response to a feature request, is certainly not the best way to stay in business

I propose as a good compromise for this specific suggestion by item, or by others that are willing to put the work themselves and are not asking you to do it for them, is to make timeline.js selectable by settings / metadata, so a customized script can be incorporated without adding any overhead to the development team.

BTW, in the future, changes in core JS files won't work. They way as it's for any modern web app.

I don't know about others, but for me, one thing that makes Espo so spectacularly appealing is that you can customize it to a degree that most other platforms don't allow or make it incredibly difficult.

I hope that you will reconsider

[yuri]

> I hope that you will reconsider

There's no way back. It's the reality of the modern web, the build step is required. We've been losing a lot of potential experienced developers who looked into sources, saw ancient AMD modules, leave and never got back.

One just will need to build bundles from CLI if they decide to customize core frontend files. Nothing hard.

[telecastg]

>
One just will need to build bundles from CLI if they decide to customize core frontend files. Nothing hard.

Understood, could you suggest some literature to look into this please ?

UPDATE: Thanks to ChatGPT I get the general idea.

Can you tell me which bundler tool are you going to use ?

ChatGPT mentions: Webpack, Parcel and Rollup

[yuri]

As Espo is quite metadata driven and has a plug-in (extension) system, using popular bundlers like Webpack, Rollup was not an option. As they require to define specific entry points of your app (frontend). But in Espo almost every file (view, model, controller etc.) should be an entry point as some extension may require it. That's why I had to resort to writing own bundler for Espo. Plus we needed support for legacy AMD modules, a mechanism for dependency between bundles, files, libs and espo modules.

The current (on master branch) build process requires just running 'grunt internal' (to build all fronted), or specific commands just for specific tasks (like transpiling). By adding save hooks in IDE, the development process does no differ from previous. Every time I save a js file, it's being automatically transpiled and moved to a needed place (in the developer mode).

[telecastg]

Thanks for the explanation