function setBookingHeight() {
var startOfDay = new Date(2000, 1, 1, 8, 0, 0, 0);
var startOfEvent = new Date(2000, 1, 1, 8, 0, 0, 0);
var endOfEvent = new Date(2000, 1, 1, 8, 0, 0, 0);

$(".cal_event").each(function (index) {
    var pixelsPerHour = $(this).closest(".cal_day").height() / 9.0;

    //position event
    var startDateTime = $(this).find(".cal_event_start").val();
    var timeStartArray = startDateTime.split(':');
    var startHours = timeStartArray[0];
    var startMinutes = timeStartArray[1];

    startOfEvent.setHours(startHours, startMinutes, 0, 0);
    var diff = (startOfEvent - startOfDay) / (3600 * 1000);
    var val1 = pixelsPerHour * diff;
    $(this).css({ top: val1 });

    //set height of event
    var endDateTime = $(this).find(".cal_event_end").val();
    timeEndArray = endDateTime.split(':');
    var endHours = timeEndArray[0];
    var endMinutes = timeEndArray[1];

    endOfEvent.setHours(endHours, endMinutes, 0, 0);
    var length = (endOfEvent - startOfEvent) / (3600 * 1000);
    var val2 = pixelsPerHour * length;
    $(this).css({ height: val2 + 'px' });
})
}

<div class="width20 overflowYAuto text-center" style="padding: 5px; height: 200px;">
        <div style="height:100%;">
             <div class="cal_day" style="border: solid 1px black; height:90%; background-color: rgba(255,0,0,0.2)">
                    <p class="redText"><small>@Model.HolidayFriday</small></p>
                    @foreach (var booking in Model.WeekEvents.ScheduleFriday.Where(e => e.SchoolClassId == @item.DetailId).OrderBy(e => e.Events.Min(ev => ev.StartDate)).ToList())
                    {
                        if (@booking.Lecture)
                        {
                            <div class="innerbox blueBox hidden-sm hidden-xs cal_event_allteachers cal_event" onclick="showLectureSessionDetails('@booking.Id')" title="Visa mer information">
                                @Html.HiddenFor(b => booking.StartTimeText, new { @class = "cal_event_start_allteachers cal_event_start" })
                                @Html.HiddenFor(b => booking.EndTimeText, new { @class = "cal_event_end_allteachers cal_event_end" })

                                <div class="floatLeft">
                                    <p class="paragraphSchadule">
                                        <b>@booking.DisplayRow1</b><br />
                                        <b>@booking.DisplayRow2</b><br />
                                        <b>@booking.DisplayRow3</b><br />
                                        <b>@booking.DisplayRow4</b><br />
                                        <b>@booking.DisplayRow5</b><br />
                                    </p>
                                </div>
                            </div>

                            <div class="innerbox blueBox text-center visible-sm visible-xs" onclick="showLectureSessionDetails('@booking.Id')" title="Visa mer information">
                                <p class="paragraphSchadule">
                                    <b>Info</b>
                                </p>
                            </div>
                        }
                        else if (@booking.FieldTrip)
                        {
                            <div class="innerbox yellowBox hidden-sm hidden-xs cal_event_allteachers cal_event" onclick="showFieldTripSessionDetails('@booking.Id')" title="Visa mer information">
                                @Html.HiddenFor(b => booking.StartTimeText, new { @class = "cal_event_start_allteachers cal_event_start" })
                                @Html.HiddenFor(b => booking.EndTimeText, new { @class = "cal_event_end_allteachers cal_event_end" })

                                <div class="floatLeft">
                                    <p class="paragraphSchadule">
                                        <b>@booking.DisplayRow1</b><br />
                                        <b>@booking.DisplayRow2</b><br />
                                        <b>@booking.DisplayRow3</b><br />
                                        <b>@booking.DisplayRow4</b><br />
                                    </p>
                                </div>
                            </div>

                            <div class="innerbox yellowBox text-center visible-sm visible-xs" onclick="showFieldTripSessionDetails('@booking.Id')" title="Visa mer information">
                                <p class="paragraphSchadule">
                                    <b>Info</b>
                                </p>
                            </div>
                        }
                        else
                        {
                            <div class="innerbox greenBox hidden-sm hidden-xs cal_event_allteachers cal_event" onclick="showBookingSessionDetails('@booking.Id')" title="Visa mer information">
                                @Html.HiddenFor(b => booking.StartTimeText, new { @class = "cal_event_start_allteachers cal_event_start" })
                                @Html.HiddenFor(b => booking.EndTimeText, new { @class = "cal_event_end_allteachers cal_event_end" })

                                <div class="floatLeft">
                                    <p class="paragraphSchadule">
                                        <b>@booking.DisplayRow1</b><br />
                                        <b>@booking.DisplayRow2</b><br />
                                        <b>@booking.DisplayRow3</b><br />
                                    </p>
                                </div>
                            </div>

                            <div class="innerbox greenBox text-center visible-sm visible-xs" onclick="showBookingSessionDetails('@booking.Id')" title="Visa mer information">
                                <p class="paragraphSchadule">
                                    <b>Info</b>
                                </p>
                            </div>
                        }
                    }
                </div>
        </div>
</div>