search

twinssbc / AngularJS-ResponsiveCalendar

A pure AngularJS responsive calendar directive
http://twinssbc.github.io/AngularJS-ResponsiveCalendar/demo/
MIT License
112 stars 77 forks source link

Layout on hours column is messy #64

Closed leceal closed 7 years ago

leceal commented 7 years ago

Hi, i'm having an issue where the event doesn't show properly in the hours column. For example, if my event is from 2:00 to 23:30, the collum gets filled up to 9 ish or 10 ish, doesn't fill the proper hour block. Any idea where can i watch this?

twinssbc commented 7 years ago

@leceal Could you print out your event object to see what's the startTime and endTime? Is it a standard date object? Is the event start hour displayed correct, only the end hour wrong?

leceal commented 7 years ago

Hey, thanks for you incredible fast answer. Yeah, it is a standar Date object, i'm attaching two pics where you can see two events:

Event One = 00:00 - 18:00 Event Two = 02:00 - 18:00

Both end at same time but start on different times, and you can see the layout for the start time is perfect, but the end time is messy hahaha.

start event time end event time

Thanks for your help

twinssbc commented 7 years ago

@leceal Which timezone are you in?

leceal commented 7 years ago

(UTC-03:00) Santiago.

leceal commented 7 years ago

Found the "error" is on the view (HTML/CSS side). The class "calendar-hour-column" is at 50px, which make the hours 10, 11, 12 to do a line break with the "A.M" or "P.M", which make the "height" of those rows thicker, which make the "event filler formula" (left: 100/displayEvent.overlapNumberdisplayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37(displayEvent.endIndex-displayEvent.startIndex)+'px') to fail filling correctly the event

twinssbc commented 7 years ago

@leceal OK. The 50px width is only for the default text. If you need to provide customized text, you need to override CSS to make the hour column wider.