Calendar Month View not adjusting for (-10) offset (Solved)

downunder

New Member
I live in Queensland Australia and the Joomla server 3.3.1 is set up for Australia/Brisbane which is GMT minus 10. If I set up an event in the normal way the start and end dates (set to UTC) appear correctly, and are stored in the database as UTC. Obviously the offset is working for the normal dates, but the visualisation has an issue.

If I setup a date that starts before 10AM (say on the 19 SEPT) the visualisation (month) shows the event starting one day earlier (on the 18th SEPT). Clicking on the event and the date and time is still OK.

I have looked into the code and it all appears to be correct even though the date manipulation is pure PHP and does not use jDATE. Any ideas please? My guess is the issue is a javascript one. I'm not good on javascript. My Github update was 2 weeks ago.
 
The main calendar viz is done in calendar.js.
I did a calendar app some month ago and set the underlying date elements to local because of such offset issues.

I think the only relevant hack in calendar.js I did to solve an issue when adding an event via double click into calendar week view was modifying around line 497
td.addClass(firstDate.getTime());// - this.HOUR);
 
Thanks troester for sending me in the right direction. I modified the showMonth function (calendar.js in visualisation plugin) between lines 312 and 387 (see the attached code). The showWeek function at line 557 (near to your suggestion) sets the start and end dates variables to the start_locale and end_locale.

I simply did the same thing in the showMonth and it worked. My month calendar now resolves to show the events in the correct day. This must be looked at by the devs as the code would not work as it is.
Code:
    showMonth: function () {
        // Set the date to the first day of the month
        var firstDate = new Date();
        firstDate.setTime(this.date.valueOf());
        firstDate.setDate(1);
        firstDate = this._getFirstDayInMonthCalendar(firstDate);
        var trs = this.el.getElements('.monthView tr');
        var c = 0; // counter
        for (var i = 1; i < trs.length; i++) {
            var tds = trs[i].getElements('td');
            var colcounter = 0;
            tds.each(function (td) {
                td.setProperties({'class': ''});
                td.addClass(firstDate.getTime());
 
                // No need to unset as this is done in setProperties above
                if (firstDate.getMonth() !== this.date.getMonth()) {
                    td.addClass('otherMonth');
                }
 
                if (this.selectedDate.isSameDay(firstDate)) {
                    td.addClass('selectedDay');
                }
                td.empty();
                // Barbara : added greyscaled week-ends color option
                td.adopt(
                    new Element('div', {'class': 'date', 'styles': {'background-color': this._getColor('#E8EEF7', firstDate)}}).appendText(firstDate.getDate())
                );
                var gridSize = 0;
                this.entries.each(function (entry) {
                    // Between (end date present) or same (no end date)
                var startdate = new Date(entry.startdate_locale);
                var enddate = new Date(entry.enddate_locale);
                    if ((enddate !== '' && firstDate.isDateBetween(startdate, enddate)) || (enddate === '' && startdate.isSameDay(firstDate))) {
                        gridSize ++;
                    }
                }.bind(this));
 
                var j = 0;
                this.entries.each(function (entry) {
                    // Between (end date present) or same (no end date)
                var startdate = new Date(entry.startdate_locale);
                var enddate = new Date(entry.enddate_locale);
                    if ((entry.enddate !== '' && firstDate.isDateBetween(startdate, enddate)) || (enddate === '' && startdate.isSameDay(firstDate))) {
                        var existingEvents = td.getElements('.fabrikEvent').length;
                        var height = 20;
 
                        var dayHeadingSize = td.getElement('.date').getSize().y;
                        height = Math.floor((td.getSize().y - gridSize - dayHeadingSize) / (gridSize));
                        var top = (td.getSize().y * (i - 1)) + this.el.getElement('.monthView .dayHeading').getSize().y + dayHeadingSize;
                        this.colwidth['.monthView'] = this.colwidth['.monthView'] ? this.colwidth['.monthView'] : td.getSize().x;
                        var width = td.getSize().x;
 
                        width = this.colwidth['.monthView'];
 
                        top = top + (existingEvents * height);
                        var left = width * colcounter;
                        // var opts = {'width': width, 'height': height, 'view': 'monthView'};
                        var opts = {'view': 'monthView', 'max-width': width};
                        opts.top = top;
                        if (window.ie) {
                            opts.left = left;
                        }
                        opts.startHour = startdate.getHours();
                        opts.endHour = enddate.getHours();
                        opts.startMin = startdate.getMinutes();
                        opts.endMin = enddate.getMinutes();
                        opts['margin-left'] = 0;
                        td.adopt(this._makeEventRelDiv(entry, opts, firstDate, td));
                    }
                    j ++;
                }.bind(this));
                firstDate.setTime(firstDate.getTime() + this.DAY);
                colcounter ++;
            }.bind(this));
        }
 
Are you familiar with GitHub? You may create a pull request.

Be aware that Fabrik is calling calendar-min.js if options are set to debug JS =no (and that your calendar.js will be overridden by an update - keep a copy).
If you can't minify calendar.js yourself (I can't) just copy your calendar.js to calendar-min.js
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top