robmonie / jquery-week-calendar

Now actively maintained in the following fork - https://github.com/themouette/jquery-week-calendar
388 stars 388 forks source link

Individual Timeslot onHover #35

Open brettmhammond opened 13 years ago

brettmhammond commented 13 years ago

After digging into the code as far as I could I found there really is not a basic structure setup to do a PER timeslot div at all since there is Timeslots and Columns stacked upon each other, things dont like to play nice. So what I had to do is create it using sort of the same code that is used for the create an event by dragging, but hacked it up a bit. It seems to work perfect on the first calendar view but soon as I click the next view like Day, 3 Day, Work Week, Full Week it does not work anymore. The biggest problem arose is with the columns and time slots setup so the first bit is to accommodate for the hovering over new columns, 2nd is for staying in the same column and having it check the actual mouse location corresponding to the time slots location. Any Ideas on how to tweak this to work in all calendar views??

    $('.wc-full-height-column').hover(function(event) {
        $('.wc-cal-event_hover').remove();
    });
    $('.wc-full-height-column').mousemove(function(event) {

        timeslotHeight = $calendar.weekCalendar("option", "timeslotHeight");

        var column = $(this);
        var HoverID = $(".wc-cal-event_hover");
        var HoverHTML = $('<div class=\"wc-cal-event_hover\"></div>');
        column.append(HoverHTML);

        var columnOffset = column.offset().top;
        var clickY = event.pageY - columnOffset;
        var clickYRounded = (clickY - (clickY % timeslotHeight)) / timeslotHeight;
        var topPosition = clickYRounded * timeslotHeight;       
        HoverID.css({top: topPosition});
        if(clickY > topPosition){
            HoverID.show();
        }else{
            HoverID.remove();
        }       
    });