What's New?

[CLOSED] Multiday appointments does not show evidence of start date/end date on IE

  1. #1
    Apr 18, 2012, 10:19 AM

    [CLOSED] Multiday appointments does not show evidence of start date/end date on IE

    Hi!

    We have been asked by a customer to address an usability issue on the calendar.

    When you define multiple day appointments, they are shown correctly on certain views, but on others although they are displayed, there is no evidence that they start on another day, for example, and worst of all that they continue for other days.

    While on Chrome this is somehow managed by displaying rounded corners that help the user understand it (however this is not so clear).

    What about extending the label of the appointments displaying "{from-date-time} -> {to-date-time} - {Title}" instead of only displaying the time?

    I can give you evidence of what I mean; look attached PDF file.
    DayView_Multiday_UX.pdf

    Thank you very much for your help,
    Cheers
    Last edited by Daniil; Apr 23, 2012 at 1:41 PM. Reason: [CLOSED]
  2. #2
    Apr 18, 2012, 2:07 PM
    Hi,

    I can suggest the following solution. Please see the comments in JavaScript.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript">
        Ext.calendar.MonthView.override({
            getEventBodyMarkup: function() {
                if (!this.eventBodyMarkup) {
                    this.eventBodyMarkup = ['{StartDate:date("Y-m-d")} {EndDate:date("Y-m-d")} {Title}', // was just {Title}
                    '<tpl if="_isReminder">',
                    '<i class="ext-cal-ic ext-cal-ic-rem">&nbsp;</i>',
                    '</tpl>',
                    '<tpl if="_isRecurring">',
                    '<i class="ext-cal-ic ext-cal-ic-rcr">&nbsp;</i>',
                    '</tpl>',
                    '<tpl if="spanLeft">',
                    '<i class="ext-cal-spl">&nbsp;</i>',
                    '</tpl>',
                    '<tpl if="spanRight">',
                    '<i class="ext-cal-spr">&nbsp;</i>',
                    '</tpl>'
                    ].join('');
                }
                return this.eventBodyMarkup;
            },

            getTemplateEventData: function(evt) {
                var M = Ext.calendar.EventMappings,
                selector = this.getEventSelectorCls(evt[M.EventId.name]),
                title = evt[M.Title.name];

                return Ext.applyIf({
                    _selectorCls: selector,
                    _colorCls: 'ext-color-' + (evt[M.CalendarId.name] ?
                    evt[M.CalendarId.name] : 'default') + (evt._renderAsAllDay ? '-ad': ''),
                    _elId: selector + '-' + evt._weekIndex,
                    _isRecurring: evt.Recurrence && evt.Recurrence != '',
                    _isReminder: evt[M.Reminder.name] && evt[M.Reminder.name] != '',
                    /*overrode*/ //Title: (evt[M.IsAllDay.name] ? '': evt[M.StartDate.name].format('g:ia ')) + (!title || title.length == 0 ? '(No title)': title)
                    Title: !title || title.length == 0 ? '(No title)': title
                },
                evt);
            }
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                    <EventStore runat="server">
                        <Events>
                            <ext:Event 
                                Title="My event" 
                                StartDate="2012/4/14" 
                                EndDate="2012/4/17" 
                                CalendarId="1" />
                        </Events>
                    </EventStore>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
  3. #3
    Apr 23, 2012, 12:47 PM

    Thank you!

    Hi Daniil, thank you for your proposed solution, it helped us to create our own workaround to meet customer requirements.

    Have a nice day,
    Cheers

Similar Threads

  1. [CLOSED] Date format property set twice when creating Date Picker Menu
    By anup in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 09, 2012, 4:28 PM
  2. how to set date format(d/mY) in dynamic created control in gridpanel after selecting or changing the date
    By praveencat123 in forum 1.x Help
    Replies: 1
    Last Post: Apr 13, 2012, 1:52 PM
  3. [CLOSED] Quick Question: Is it Possible to change the Date Format of the Date Fields in the Edit Event Window?
    By rbarr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 30, 2011, 3:30 PM
  4. When a DateField is readonly and disabled, you can still select a date using the date picker
    By nootn in forum 1.x Help
    Replies: 3
    Last Post: May 06, 2010, 12:48 PM
  5. start date must be less than end date validation in coolite 0.8
    By joydeepsen in forum 1.x Help
    Replies: 1
    Last Post: Jun 11, 2009, 2:09 PM

Tags for this Thread

Posting Permissions