vt730: Calendar UX Improvements

Hi Alan, about point 3 of your list, I made for a client a menu entry action to clean shared calendar and enable just the one of current record owner and redirect to a very clean shared calendar.

Just FYI I have managed deal with item 3 above.

Using a little bit of Javascript to insert (prepend) a new box at the top of the list of Calendar types. This acts like the mass-select in List Views. When you check it, all non-checked calendars below are checked and a change event sent to each one so it triggers a calendar feed load. Uncheck it and it clears the checkboxes and feeds.

And this is the code:

    /**
     * Insert (prepend) new button to top of list of Shared Calendars
     * which allows the user to select or deselect all subsequent rows
    **/
    addMassSelectToCalendar : function() {
        var thisInstance = this;
        app.event.on('Calendar.Viewtypes.PostLoad.Event', function() {
            var massSelect = '<li class="activitytype-indicator calendar-feed-indicator mass-edit-option">';
            massSelect += '<span>Mass Select</span>';
            massSelect += '<span class="activitytype-actions pull-right">';
            massSelect += '<input class="mass-select" type="checkbox">';
            massSelect += '</span></li>';
            jQuery('#calendarview-feeds').find('ul:first').prepend(massSelect);
            thisInstance.registerCalendarMassSelectEvent();
        });
    },

    /**
     * Event listener for change on mass select checkbox.
     * Click/set true/false on all non-matching checkboxes & 
     * trigger change event
    **/
    registerCalendarMassSelectEvent : function() {
        var container = jQuery('#calendarview-feeds');
        var calendarFeeds = jQuery('ul.feedslist input.toggleCalendarFeed', container);
        jQuery('input.mass-select', container).on('change', function() {
            var massSelectchecked = this.checked;
            calendarFeeds.each(function(i) {
                // Only trigger change where necessary
                if(this.checked != massSelectchecked) {
                    this.checked = massSelectchecked;
                    jQuery(this).change();
                }
            });
        });
    },

I have also managed to deal with item 2 as well - loading the edit popup rather than taking the user away from the Calendar...

    registerCalendarViewEventClick : function() {
        var thisInstance = this;
        var moduleName = app.getModuleName();
        var view = app.view();
        if(moduleName == 'Calendar') {
   			if(view == 'SharedCalendar') {
				var className = 'Calendar_SharedCalendar_Js';
			} else {
				var className = 'Calendar_Calendar_Js';
			}
			// Calendar_Calendar_Js modified to trigger app.event 
			app.event.on('fullCalendar.eventAfterAllRender', function(e) {
                thisInstance.registerClickHandler(className);
            });
        }
    },
    
    registerClickHandler : function(className) {
        var calendarObj = window[className];
        var calendarInstance = new calendarObj();
        jQuery('.fc-event-container > a.fc-event').click(function(e) {
            e.preventDefault();
            var id = jQuery(e.currentTarget).url().param('record');
            var module = jQuery(e.currentTarget).url().param('module');
            if(id) {
                if(module == 'Events') {
                    calendarInstance.editCalendarEvent(id,false);
                } else {
                    calendarInstance.editCalendarTask(id);
                }
            }
        });
    },

Thank you Alan! Is there anything I could help you with?

Alan, does the above code solve all 5 issues? If so, I would totally hope it gets merged into the project.

I have clients who have previously complained about very similar issues. One of them wanted to have the users arranged in a tree hierarchy according to roles and have the ability to mass check/uncheck a whole role.

@ruben.estrada No. Only nos 2 & 3.

@ruben.estrada One thing - I had to modify the Calendar_Calendar_Js class to trigger a custom app.event: fullCalendar.eventAfterAllRender because I couldn't find one that was triggered after the fullCalendar was completely rendered.

After line 1706 add:

    eventAfterAllRender : function(view) {
        app.event.trigger('fullCalendar.eventAfterAllRender', true);
   },

@lord_alan still if it only fixes 2 and 3 you should do a MR. You've already taken the time to create the issue and posting the code. why not a MR?

Thanks again for sharing :)

@ruben.estrada For the bulk edit, it would probably be better to generate the block and checkbox using the template(s) rather than inserting it using javascript.

If one of the vtiger devs wants to comment on the suitability of these two solutions that would be helpful. @vtiger @uma.s ?

@lord_alan This solution really looks helpful, As many in community has a view for this to get it addressed and ease of usability in shared calendar.

I think it's good to create a merge request for all the points you have mentioned from 1 to 5 which looks intreseting.

As the proposed solution of mass operation looks good, We should take this to tpl instead of javascript and retain only actions in javascript.

If your ok to submit the merge request. So that we can make this to 7.4.0

mentioned in issue #1578

@uma.s Thanks for the feedback. If I get some time I will try and put together a MR for some of these items.

But for No. 1 I am not really sure of the best way to go about this? It will probably require a new table or column in the db somewhere to store the users' selected order. And then, if some new calendars are shared, or existing calendars unshared, what should happen to the existing order?

mentioned in merge request !800 (merged)

I've just made an MR for no. 3.

I am not sure of the best approach for the others to be honest.

I have already discussed my concerns.
Should this function be the "default" for all users? Many may have become used to the way the Calendar works now? If it becomes the default, should the pencil icon in the popup go to the full edit view instead?
I am not sure where to begin with this one. Can we detect/use CTL+Drag? What about resetting the start/end datetime values?
This is complicated. The startDateTime object is being passed from fullCalendar I think. Somehow one needs to determine if this is a "dayClick" or not and then use the "start_hour" parameter to add to the startDateTime object if the current time is less than "start_hour". Whilst taking into consideration the user's timezone...

For 1., my opinion is that, yes, there needs to be persistence in the database for the order each user assigns. If new calendars are shared simply add them at the bottom of the list. If an existing calendar gets unshared simply skip it in the ordering. When the user re-orders the items, then recalculate the sequence and remove the holes created by unshared calendars.

Regarding 2, I don't think the pencil should take you to the full form, but to the quick-form like the default. From there you can allways click on the "Go to full form" button:

Regarding 3 (4 in the original list), maybe creating a duplication icon would also work. After clicking on it, display a modal asking for the new start and end. When clicking on save, send an ajax call to a duplication action passing the original event id and the new start and end times.

mentioned in commit 91146beb

vt730: Calendar UX Improvements

Designs

Child items 0

Activity

Admin message

vt730: Calendar UX Improvements

Activity