Displaying custom calendar in Mobile app

Displaying custom calendar in Mobile app

  

Hello,

I have a scheduler/calendar in web app which shows color coded different events too. I want to disply the same calendar(view only) in my mobile app. 

Can some body give me ideas?

Thanks,

Preeti

Hi Preeti,

Unfortunately, you can't reuse web components in Mobile Apps, or vice versa. So if the Web App calendar is custom built, you'll need to rebuild it for mobile.

Hi Preeti,

Alternatively to what Kilian said, if you only need to display the calendar in your mobile app, you could try to use the InAppBrowser plugin (https://www.outsystems.com/forge/component/1558/inappbrowser-plugin/) and set its URL to your web application's calendar screen. Of course, you're going to have to make sure that the calendar screen is optimized to be displayed in a mobile app.

And it won't work offline, and it probably provides a bad (non-seemless) user experience. I'd advise against it!

Even though you're right Kilian, those might be acceptable trade-offs when the other alternative is re-writing the calendar from scratch for mobile apps. The InAppBrowser option could also be a temporary solution while the calendar is being re-written.

Anyway, now the OP has a few more options to consider, and can make a better informed decision :)

I did try InAppBrowser plugin but now I'm using iframe web block. It works but still not satisfied with the result.

Even though I want to rebuild the calendar in mobile app, there are couple of points that I want to discuss.

First....how can i create my own calendar in mobile app?

The second thing is.... business requirement is to do scheduling through web app calendar and sync/update the mobile app calendar.

Solution

Preeti,

I just happen to have built a calendar for a mobile app project I'm currently working on. Unfortunately, due to confidentiality issues, I can't share many details about the implementation. Here's what I can share: I used a List widget to list the events within the selected date. Inside the List, I have ListItems and, inside those, I have absolutely positioned containers to display the Event details. I then use client actions and CSS to calculate the position of each container inside its parent based on the Event's start time. So suppose you have an event that starts at 8AM and that you have your screen setup in a way that every pixel represents a minute in your day's schedule. In order to correctly position your event within the schedule, you have to set its "top" property to "480px" (8 hours x 60 minutes = 480).

The height of the container is calculated based on the duration of the event. So if you have an event that lasts 60 minutes, you set its "height" to "60px".

Following the same principle, you'll need logic to identify overlapping events and set the container's "left" and "width" properties accordingly. 

Here's a sample of what the calendar in my app looks like:

I hope this is enough information to point you in the right direction.

About the web/mobile app sync, is the app expected to work offline? If so, then you'll need to synchronize data between your server database and the device's local storage. Here's the documentation to get you started on that. If you don't need it to work offline, then you can just fetch the data from the server using an Aggregate.

Solution

Aurelio Junior wrote:

Preeti,

I just happen to have built a calendar for a mobile app project I'm currently working on. Unfortunately, due to confidentiality issues, I can't share many details about the implementation. Here's what I can share: I used a List widget to list the events within the selected date. Inside the List, I have ListItems and, inside those, I have absolutely positioned containers to display the Event details. I then use client actions and CSS to calculate the position of each container inside its parent based on the Event's start time. So suppose you have an event that starts at 8AM and that you have your screen setup in a way that every pixel represents a minute in your day's schedule. In order to correctly position your event within the schedule, you have to set its "top" property to "480px" (8 hours x 60 minutes = 480).

The height of the container is calculated based on the duration of the event. So if you have an event that lasts 60 minutes, you set its "height" to "60px".

Following the same principle, you'll need logic to identify overlapping events and set the container's "left" and "width" properties accordingly. 

Here's a sample of what the calendar in my app looks like:

I hope this is enough information to point you in the right direction.

About the web/mobile app sync, is the app expected to work offline? If so, then you'll need to synchronize data between your server database and the device's local storage. Here's the documentation to get you started on that. If you don't need it to work offline, then you can just fetch the data from the server using an Aggregate.

Thank you Aurelio,

That's  really helpful. At least I can get started and come back to you if I have further doubts. The good thing is my calendar will not be that complicated because it will not have any overlapping and are all all-day events.

Preeti

Preeti Gupta wrote:

Aurelio Junior wrote:

Preeti,

I just happen to have built a calendar for a mobile app project I'm currently working on. Unfortunately, due to confidentiality issues, I can't share many details about the implementation. Here's what I can share: I used a List widget to list the events within the selected date. Inside the List, I have ListItems and, inside those, I have absolutely positioned containers to display the Event details. I then use client actions and CSS to calculate the position of each container inside its parent based on the Event's start time. So suppose you have an event that starts at 8AM and that you have your screen setup in a way that every pixel represents a minute in your day's schedule. In order to correctly position your event within the schedule, you have to set its "top" property to "480px" (8 hours x 60 minutes = 480).

The height of the container is calculated based on the duration of the event. So if you have an event that lasts 60 minutes, you set its "height" to "60px".

Following the same principle, you'll need logic to identify overlapping events and set the container's "left" and "width" properties accordingly. 

Here's a sample of what the calendar in my app looks like:

I hope this is enough information to point you in the right direction.

About the web/mobile app sync, is the app expected to work offline? If so, then you'll need to synchronize data between your server database and the device's local storage. Here's the documentation to get you started on that. If you don't need it to work offline, then you can just fetch the data from the server using an Aggregate.

Thank you Aurelio,

That's  really helpful. At least I can get started and come back to you if I have further doubts. The good thing is my calendar will not be that complicated because it will not have any overlapping and are all all-day events.

Preeti


Hi Aurelio,

When I'm using iFrame or InAppBrowser plugin to display calendar from the web app, it displays good on the emulator but displays partially on phone.

This is my CSS for the web block which uses iframe.

.internal-frame {
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
    overflow: hidden;
    position:fixed;  
    bottom: 0;
    left: 0;
    right: 0;
    top: 0px;  
}

Am I missing something here?

Please reply ASAP. it's urgent.

Thanks,

Preeti


Hi Preeti,

What's the resolution of your phone? Since you have "overflow" set to "hidden", if the elements don't fit, they're simple cut off. If you have a phone with a low resolution, and your elements don't scale well, then you can get the behaviour you are seeing.

Kilian Hekhuis wrote:

Hi Preeti,

What's the resolution of your phone? Since you have "overflow" set to "hidden", if the elements don't fit, they're simple cut off. If you have a phone with a low resolution, and your elements don't scale well, then you can get the behaviour you are seeing.

I'm using iPhone 6 (375x667)


Ok, that's the same as in the emulator, so it should work, but then again, the browser may deal differently with some stuff than the phone's web rendering engine. I still think the cause is that you have absolute widths somewhere in the CSS, or just too many elements to display.

Kilian Hekhuis wrote:

Ok, that's the same as in the emulator, so it should work, but then again, the browser may deal differently with some stuff than the phone's web rendering engine. I still think the cause is that you have absolute widths somewhere in the CSS, or just too many elements to display.

Hi Kilian,

So finally I figured out that the calendar does not display correctly on iPhones (Safari) but it does display the way we want on Androids(Chrome). I'm using fullcalendar and some java script libraries to display calendar on web application and that webscreen on my mobile app.

Now my question is ....is there any way to make it compatible for "Safari".

Even though in Full calendar documentation it says that it supports chrome and safari.


Hi Preeti,

I'd first test the Web Screen in Safari on a PC (or MacBook), and see if it works as expected there. If it doesn't, you could use the browser's devtools (does Safari have devtools? I'm not sure) to see why that is, and fix it.