<style type="text/css">
    .icon_tooltip {
        width: 16px;
        height: 16px;
        margin: auto;
        padding-left:3px;
        display: inline-block;
    }

    .icon_recurrence {
        /*background: url(../Arctic/icon_recurrence.gif) no-repeat 0px 0px;*/
        background: url(../../../../skins/Arctic/icon_recurrence.gif) no-repeat 0px 2px; display:inline-block;
    }
    .icon_appt_edit {
        background: url(../../../../skins/Arctic/appt_edit.gif) no-repeat 0px 0px;
    }
    .icon_appt_ics {
        background: url(../../../../skins/Arctic/appt_ics.gif) no-repeat 0px 0px;
    }
    .icon_appt_delete {
        background: url(../../../../skins/Arctic/appt_delete.gif) no-repeat 0px 0px;
    }
</style>
<div class="event-tip" style="border:1px solid rgb(9,114,198); overflow:hidden;min-width:150px;max-width:200px;min-height:100px;max-height:200px;background-color:white">
    <table style="padding:4px;width:100%">
        <tr>
            <td>
                <table style="width:100%" cellpadding="0" cellspacing="0">
                    <tr><td style="width:5px;background-color:darkblue;padding: 0px 0px 0px 0px"></td><td style="background-color:lightblue"><div style="min-width:150px;margin:4px" class="event-tip-subject">Subject</div></td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr class="event-tip-start" style="vertical-align:top"><td style="vertical-align:top"><div class="event-tip-label">Start:</div></td><td><div class="event-tip-datevalue">dd/mm/yy HH:MM PM</div></td></tr>
                    <tr class="event-tip-end" style="vertical-align:top"><td style="vertical-align:top"><div class="event-tip-label">End:</div></td><td><div class="event-tip-datevalue">dd/mm/yy HH:MM PM</div></td></tr>
                </table>
                <table>
                    <tr class="event-tip-location"><td style="vertical-align:top"><div class="event-tip-label">Location:</div></td><td style="vertical-align:top"><div style="overflow:hidden;vertical-align:top" class="event-tip-textvalue">Melbourne sdfsdfsdffsdfsdfsdfsdfsdfdsffffffffffffffffffffffffffffff</div></td></tr>
                    <tr class="event-tip-reminder"><td style="vertical-align:top"><div class="event-tip-label">Reminder:</div></td><td style="vertical-align:top"><div class="event-tip-textvalue">None</div></td></tr>
                </table>
            </td>
        </tr>
        <td><table width="100%"><tr><td><div class="icon_appt_edit icon_tooltip"></div><div class="icon_appt_ics icon_tooltip"></div><div class="icon_appt_delete icon_tooltip"></div></td><td align="right" style="text-align:right"><div class="icon_recurrence icon_tooltip"></div></td></tr></table>
        <tr class="event-tip-actionrow">
        </td></tr>
    </table>
</div>
<script type="text/javascript">
    var AppointmentToolTip = {
        Localize: function () {
            //set language tokens
            $('.event-tip-start .event-tip-textvalue').text(t_('[ME_TXT-Start]') + ':');
            $('.event-tip-end .event-tip-textvalue').text(t_('[ME_TXT-End]') + ':');
            $('.event-tip-location .event-tip-label').text(t_('[ME_TXT-Location]') + ':');
            $('.event-tip-reminder .event-tip-label').text(t_('[ME_TXT-Reminder]') + ':');
            $('.event-tip-reminder .event-tip-textvalue').attr('title', t_('[ME_TXT-Reminder]'));
        },
        SetDetails: function (container, event) {
            //populates the dialog with the settings contained in details 
            if (!event) return;
            if (!event.title) {
                event.title = '';
            }
            if (!event.location) {
                event.location = '';
            }
            if (!event.start) {
                event.start = '';
            }
            if (!event.end) {
                event.end = '';
            }
            // date formatting via moment.js: https://momentjs.com/docs/
            $('.event-tip-subject').text(event.title);
            try {
                $('.event-tip-start .event-tip-datevalue').text(event.start.format("L LT"));
                $('.event-tip-end .event-tip-datevalue').text(event.end.format("L LT"));
            }
            catch (err) {

            }
            $('.event-tip-location .event-tip-textvalue').text(event.location ? event.location : '');
            $('.icon_recurrence')[event.isrecurring ? 'show' : 'hide']();
            if (event.reminderset) {
                $('.event-tip-reminder .event-tip-textvalue').text(event.reminderminutesbeforestart.toString() + ' ' + t_('[ME_TXT-Minutes]'));
            } else {
                $('.event-tip-reminder .event-tip-textvalue').text(t_('[ME_TXT-None]'));
            }
            //configure the actions for the buttons
            $('.icon_appt_edit').off('click').on('click', function () { container.hide(); onEdit(event); return true });
            $('.icon_appt_ics').off('click').on('click', function () { container.hide(); onExport(event.id, event.resourceid); return true });
            $('.icon_appt_delete').off('click').on('click', function () { container.hide(); onDelete(event); return true });
        },
        ClearDetails: function () {
            $('.event-tip-subject').text('');
            $('.event-tip-start .event-tip-datevalue').text('');
            $('.event-tip-end .event-tip-datevalue').text('');
            $('.event-tip-location .event-tip-textvalue').text('');
            $('.icon_recurrence')['hide']();
            $('.event-tip-reminder .event-tip-textvalue').text('');
        },
        Configure: function () {
            //configure which options are available
        }
    }
</script>