Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

updateRendering incorrect for MonthColumnView when endDate is the first of the month #56

Closed
Kalyse opened this Issue · 5 comments

2 participants

@Kalyse

Hi,
When the endDate is the first of the month, (so that the start date is in the previous month), if you are using the MonthColumnView, the rendering is wrong.

It assumes to just extend the height one item more, which causes the actual rendered item to expand out all the way to the bottom of the month.

Look at this example image.. You can see the startDate and the endDate in the UI on the left.

And it seems as though the updateRenderer passes the wrong height...

https://github.com/damiengarbarino/dojo-calendar/blob/master/MonthColumnView.js#L1199

calendarBugHeight

I believe that the problem originates in the calculation made in _dateToYCoordinate()

The pos gets calculated incorrectly because the 1st of the month, minus 1 day, is 31. And then the height becomes the full height of the month...

_dateToYCoordinate: function(renderData, d, start){
        var pos = 0;
        if(start){
            pos = (d.getDate()-1) * this.renderData.daySize;
        }else{
            var d2 = this._waDojoxAddIssue(d, "day", -1);
            pos = this.renderData.daySize + ((d2.getDate()-1) * this.renderData.daySize);
        }            
        pos += (d.getHours()*60+d.getMinutes())*this.renderData.daySize/1440;
            return pos;
}

Ps. I'm Layke in #dojo so feel free to ping me in the IRC channel if you make it in any time.

@Kalyse

It took me a while to figure out what was going on, but I've managed to come up with a very basic fix.
I don't understand the internals of dojox.Calendar, so I could be totally off the ball in my approach...

See the file _layoutVerticalItems

https://github.com/damiengarbarino/dojo-calendar/blob/master/MonthColumnView.js#L1110

for(var i = 0; i < items.length; i++){
    var item = items[i];
    var overlap = this.computeRangeOverlap(renderData, item.startTime, item.endTime, startTime, endTime);
    var litem;
    var top = this._dateToYCoordinate(renderData, overlap[0], true);
    var bottom = this._dateToYCoordinate(renderData, overlap[1], false);
    // I add this check to see if we're ending on the first of the month... 
    if(overlap[1].getDate() === 1 
        && (overlap[0].getDate() === overlap[1].getDate()) 
        && (overlap[0].getMonth() === overlap[1].getMonth()) ){
        var end = (overlap[1].getHours()*60+overlap[1].getMinutes())*renderData.daySize/1440
        layoutItems.push( 
            lang.mixin({
                start: top,
                end: end,
                range: overlap,
                item: item
            }, item)
            );
    } else if (bottom > top){
        layoutItems.push( 
            lang.mixin({
                start: top,
                end: bottom,
                range: overlap,
                item: item
            }, item)
            );
    }
}

This fixes the height issue of the event created by the renderer.

@Kalyse Kalyse closed this
@Kalyse Kalyse reopened this
@damiengarbarino

Hi,
Which version are are you using?
I tried to create a reproducing sample running on Dojo 1.8.3 and I am not able to reproduce.
Please run this sample and change it to make it reproduce the issue:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Month ColumnView Sample: Desktop</title>             
        <style type="text/css">
            @import "../themes/claro/MonthColumnView.css";
            @import "../../../dojo/resources/dojo.css";
            @import "../../../dijit/themes/dijit.css";
            @import "../../../dijit/themes/claro/claro.css";
            #calendarNode {
                position:absolute; 
                left:10px; 
                right:10px; 
                top:10px; 
                bottom:10px;
            }

        </style>            
    </head>

    <body class="claro">
        <script type="text/javascript" 
                        data-dojo-config="async: true, parseOnLoad: true"
                        src="../../../dojo/dojo.js"></script>

            <script type="text/javascript">

            require(["dojo/ready", "dojo/_base/declare", "dojo/_base/fx", "dojox/calendar/MonthColumnView", 
                    "dojox/calendar/Keyboard", "dojox/calendar/Mouse",  "dojox/calendar/VerticalRenderer", 
                    "dojo/store/Memory", "dojo/store/Observable"],

                function(ready, declare, fx, MonthColumnView, CalendarKeyboard, CalendarMouse, VerticalRenderer, Memory, Observable){

                    ready(function(){

                        var someData = [{
                            summary: "test",
                            startTime: new Date(2013, 01, 09),                          
                            endTime: new Date(2013, 02, 01)
                        }];

                        // Calendar creation & configuration

                        colView = declare([MonthColumnView, CalendarKeyboard, CalendarMouse])({
                            startDate: new Date(2013, 0, 1),
                            columnCount: 6,
                            store: new Observable(new Memory({data: someData})),
                            verticalRenderer: VerticalRenderer
                        }, "calendarNode");


                        fx.fadeOut({
                            node:"loadingPanel", 
                            onEnd: function(node){
                                node.parentNode.removeChild(node)
                            }}).play(500);

                    });
            });
            </script>

            <div id="loadingPanel" style="position:absolute;z-index:10;width:100%;height:100%;background:#ffffff">
                <span style="background: #DBEB8F;padding:2px">Loading...</span>
            </div>

            <div id="calendarNode"></div>                           
    </body>
</html>

month

@Kalyse

Hi Damien,

Please see the attach JS Fiddle. http://jsfiddle.net/Layke/fvTqx/

Just some background...

I use the calendars for vacation rentals bookings, where the arrivals are at say, 2pm, and depatures are at 10am.
So, when I add the entries, I also specify a time. (I do this, because I need two events to be listed on the same date frequently. One for the departure, and one for the arrival). The events should be positioned based on their time, so that they don't overlap vertically (and consequently reduce the size of it to 50% width).

Let me know if I mistakenly assumed that times are also supported in the events.

All I have changed in your example is the new Date()...

  var someData = [{
                            summary: "test",
                            startTime: new Date(2013, 01, 09, 10,20,0),
                            endTime: new Date(2013, 02, 01, 8, 0, 0)
                        }];

http://jsfiddle.net/Layke/fvTqx/

calendarBugHeight1

@damiengarbarino

Hi,
Indeed, adding time allows to reproduce. This is exactly what I needed.
Time are supported, I will investigate this and fix it.
Thanks,

@damiengarbarino

Bug is fixed in my test case, please reopen issue if this is not the case for you.

Thanks,

Damien

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.