Split dayview/weekview hour label to 30min

[suranavarun]

Hi,

Is it possible to split the hour display to 30min instead of 1 hour i.e showing it as 8AM,8:30 AM,9 AM,9:30 AM etc.

Varun

[twinssbc]

@suranavarun It's not possible unless changing the source code.

[MarkDsantos]

@twinssbc : Hi, was curious to know if there was a way of doing this? As 30 mins and 15 mins intervals?

[twinssbc]

@mark261092 You can use "step=15" or "step=30" attribute to make the events displayed at 15 or 30 mins intervals. But it's not to also make the hour label display at 15 or 30 mins interval.

[MarkDsantos]

that portion i've seen. Wanted to know if it was possible to change the hour label anywhere.

[PadmajaKotteri]

@twinssbc Can you guide on how to split the hour label dynamically if possible?

[twinssbc]

@PadmajaKotteri Sure, but it would require quite large amount of code change. The whole table in the weekview is rendered by below ng-repeat loop. You need to double the view.rows so that the table can contain 48 rows instead of 24 rows. You also need to update _onDataLoaded to calculate the event startIndex and endIndex at 48 hours interval.

<tr ng-repeat="row in view.rows track by $index">
                            <td class="calendar-hour-column text-center">
                                {{::row[0].time | date: formatHourColumn}}
                            </td>
                            <td ng-repeat="tm in row track by tm.time" class="calendar-cell" ng-click="select(tm.time, tm.events)">
                                <div ng-class="{'calendar-event-wrap': tm.events}" ng-if="tm.events">
                                    <div ng-repeat="displayEvent in tm.events" class="calendar-event"
                                         ng-click="eventSelected({event:displayEvent.event})"
                                         ng-style="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}"
                                         ng-include="::normalEventTemplateUrl">
                                    </div>
                                </div>
                            </td>
                        </tr>

I can think out another simple but a bit hacky way. Below td is responsible for displaying the hour label. You can change the binding to display two labels in one td, and also wrap the second label to the second line.

                            <td class="calendar-hour-column text-center">
                                {{::row[0].time | date: formatHourColumn}}
                            </td>

[PadmajaKotteri]

@twinssbc : Thanks a lot :-) It involved lot of code editing but worked :-)