[OPEN] [#840] Calendar scroll problems with touch screen

**Fergus** · May 31, 2015, 9:05 AM

Hi,
I am having problems with the calendar component with touch screen devices.

If you try to scroll the week or day view on the calendar body it selects a time range. If you try to scroll by dragging the scroll bar on the right it does not work either.

If you tap on the down arrow of the scroll bar or an empty area of the scroll bar it can scroll but it also opens the edit event window.

So it is unworkable on a touch screen.

Is there a way to set the main body to scroll instead of selecting a time range. As it is more important and intuitive to be able to do this.

You can reproduce this problem on the calendar demo on the examples page.

Regards
Fergus

**Daniil** · Jun 01, 2015, 10:25 AM

Hi Fergus,

It is possible to turn drag&drop down by this code:

<ext:CalendarPanel ...>
    <DayView runat="server">
        <CustomConfig>
            <ext:ConfigItem Name="enableDD" Value="false" Mode="Raw" />
        </CustomConfig>
    </DayView>
    <WeekView runat="server">
        <CustomConfig>
            <ext:ConfigItem Name="enableDD" Value="false" Mode="Raw" />
        </CustomConfig>
    </WeekView>
</ext:CalendarPanel>

**Fergus** · Jun 01, 2015, 4:05 PM

I tried to add the code you posted.

It now does not let me drag and drop events which i want to do.

It also does not help the scrolling either. Exactly the same.

I am looking for the same functionality as a gridpanel or dataview. When you swipe on the body they scroll.

As mentioned the calendar is totally unworkable on a touch screen because of this issue.

Regards
Fergus

**Daniil** · Jun 08, 2015, 11:50 AM

Reproduced.

I've found this on the Sencha forums.
https://www.sencha.com/forum/showthread.php?288102

The question is quite old and it appears to not working still.

Interesting I was able to show a scroll bar using this Stackoverflow answer, but for some reason scrolling doesn't work anyways.

Example

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <style>
        ::-webkit-scrollbar {
            -webkit-appearance: none;
            width: 7px;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background-color: rgba(0,0,0,.5);
            -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server" ActiveIndex="0">
                    <EventStore runat="server">
                        <Events>
                            <ext:EventModel
                                Title="My event"
                                StartDate="2015/6/8"
                                EndDate="2015/6/8"
                                CalendarId="1" />
                        </Events>
                    </EventStore>
                    <DayView runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="enableDD" Value="false" Mode="Raw" />
                        </CustomConfig>
                    </DayView>
                    <WeekView runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="enableDD" Value="false" Mode="Raw" />
                        </CustomConfig>
                    </WeekView>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

Searching a solution in the internet, I found this article that appears to be quite related to that scrolling issue on iPad.

**Fergus** · Jun 16, 2015, 8:04 AM

Hi,
I cannot seem to find a way to make it work

But i noticed that scrolling works perfectly on the calender pro from ext.ensible.com.

Does anybody know if there is a way to integrate the pro version of the extensible calendar into Ext.Net V3.1 build.

I would be willing to purchase a licence from them if it were possible to implement.

I played around with trying to integrate their js files into the build without success.

Is it possible to integrate with ext.net or would i just have to use their product thorough javascript alone?

Thanks
Fergus

**Daniil** · Jun 17, 2015, 10:41 AM

By the way, you might be interested to read this post.
http://forums.ext.net/showthread.php...l=1#post124421

Is it possible to integrate with ext.net or would i just have to use their product thorough javascript alone?

It is definitely possible. You can create a custom control - a wrapper for the ext.ensible Calendar JavaScript. Actually, the same that is done for our Ext.NET CalendarPanel. I even think that for the beginning you can inherit from the Ext.NET CalendarPanel control and just override the Resources property to use other JavaScript (ext.ensible's). But... there is a problem. As far as I can see ext.ensible supports ExtJS 4. But Ext.NET 3 uses ExtJS 5. If use Ext.NET 3 you'll only be able to use the ext.ensible Calendar in an iframe with ExtJS 4.

**Fergus** · Jun 19, 2015, 11:33 AM

Hi,
Thanks for the reply.

There are only a few things to change to make it work with extjs5 so i have read.

As for overriding the resource property, is there an easy way to do this. I have been attempting it from examples in the forums but they seem quite complicated. Updating assembly.cs creating javascript files and embedding them into the build.

Is there a simple was to override the resource items? Like using the calendar panel and setting the js files to Extensible files.

I tried adding the extensible js files as ClientResourceItems of the calendarpanel but it did not seem to change anything.

Thanks
Ferug

**Daniil** · Jun 19, 2015, 4:56 PM

If you don't want to embed resources into a dll, then I can suggest this approach.

Example

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

<script runat="server">
    public class MyCalendarPanel : CalendarPanel
    {
        protected override List<ResourceItem> Resources
        {
            get
            {
                List<ResourceItem> resources = base.Resources;
                int count = resources.Count;

                // Remove original JavaScript and CSS resources
                resources.RemoveAt(count - 1);
                resources.RemoveAt(count - 2);
                
                return resources;
            }
        }
        
        public override List<ClientResourceItem> ResourceItems
        {
            get
            {
                List<ClientResourceItem> resources = base.ResourceItems;

                resources.Add(new ClientResourceItem("calendar.css", true));
                resources.Add(new ClientResourceItem("calendar.js"));

                return resources;
            }
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Form.Controls.Add(new MyCalendarPanel());
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

    </form>
</body>
</html>

**Fergus** · Jun 20, 2015, 2:10 PM

Thanks for the sample.

It turns out that there are indeed too many bugs to get it to work with Version 3.

I did find however a function in the DayDragZone.js file as below.

You will notice in the comments that if you are not resizing or moving an event that it will return a caldrag parameter.
I have tried changing this to null and various other tweaks with the javascript but only managed to disable dragging altogether. But still body does not scroll.

You will notice that in the Version 2.5 of Ext.Net that calendar body scrolling works perfectly. But you cannot drag events.

So ideally the best result would be if using finger swipe to scroll the body. If dragging with mouse then fire rangeselect.
But i could not find any difference in the debugger if i use a finger or a click.

If that is not possible then just to disable range select and scroll the day/week body would be sufficient. This would at least make it useable on touch screens.

getDragData: function(e) {
        var startDateName = Ext.calendar.data.EventMappings.StartDate.name,
            endDateName = Ext.calendar.data.EventMappings.EndDate.name,
            t, p, rec;
        
        t = e.getTarget(this.resizeSelector, 2, true);
        
        if (t) {
            p = t.parent(this.eventSelector);
            rec = this.view.getEventRecordFromEl(p);

            return {
                type: 'eventresize',
                ddel: p.dom,
                eventStart: rec.get(startDateName),
                eventEnd: rec.get(endDateName),
                proxy: this.proxy
            };
        }
        
        t = e.getTarget(this.eventSelector, 3);
        if (t) {
            rec = this.view.getEventRecordFromEl(t);
            return {
                type: 'eventdrag',
                ddel: t,
                eventStart: rec.get(startDateName),
                eventEnd: rec.get(endDateName),
                proxy: this.proxy
            };
        }

        // If not dragging/resizing an event then we are dragging on
        // the calendar to add a new event
        t = this.view.getDayAt(e.getX(), e.getY());
        if (t.el) {
            return {
                type: 'caldrag',
                dayInfo: t,
                proxy: this.proxy
            };
        }
        return null;
    }

So if anybody knows a solution to this i would be grateful.

Sorry to be persistant about this. Just i have put a lot of time already into the calendar without realizing that it would not be useable on touch screens.

Regards
Fergus

**Daniil** · Jun 21, 2015, 8:46 PM

Sorry to be persistant about this. Just i have put a lot of time already into the calendar without realizing that it would not be useable on touch screens.

I totally understand. It is we who are sorry for that situation. We will do our best to help overcome this problem. I will be back with an update later this week.

Thread: [OPEN] [#840] Calendar scroll problems with touch screen

Thread Tools

Search Thread

Display

[OPEN] [#840] Calendar scroll problems with touch screen

Similar Threads

Is Ext.NET already support for touch screen?

[CLOSED] Tooltip vs touch screen

[CLOSED] Stretching Portlets to fix the whole screen (100% screen height and width)

[CLOSED] [#232] CalendarPanel. When I click in time slot, the scroll bar moves to up (top of calendar)

Calendar Problems

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [OPEN] [#840] Calendar scroll problems with touch screen

[OPEN] [#840] Calendar scroll problems with touch screen

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us