How to implement the add to calendar in mobile web ? Is there any way to implement this. This feature is to be supported for all smart phones.
Asked
Active
Viewed 3,698 times
-2
-
What do you mean by "Add to calendar"? Be more specific, explain what technologies are you using, your objectives and http://www.whathaveyoutried.com. – Ivo Pereira May 28 '13 at 10:32
-
We need to add an event to calendar for mobile web. How should we implement this in mobile web. – user694688 May 28 '13 at 10:35
-
Do you need to implement a date picker or a real calendar implementation? – Gajotres May 28 '13 at 12:00
2 Answers
3
Unfortunately calendar specified by HTML5 spec is still not properly implemented among different HTML5 so you will need to use a 3rd party implementation.
Datepickers
If you need them for your jQuery Mobile site (looking into your question history) you can always use a 3rd party date picker's for jQuery Mobile. 3 are available and they are great. Unfortunately only Mobiscroll can be used cross platform because of its support for different skins. This is also a datepicker I would advise you to use if you are using jQuery Mobile.
Mobiscroll - http://jsfiddle.net/Gajotres/WDjfR/
$(document).on('pagebeforeshow', '#index', function(){
$('#demo').mobiscroll().date({
invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
dateOrder: 'dd mm yy',
dateFormat : "dd-mm-yy"
});
});
Mobipick - http://jsfiddle.net/Gajotres/zyVjE/
$(document).on('pagebeforeshow', '#index', function(){
$('#demo').mobipick({
dateFormat: "MM-dd-yyyy"
});
});
Datebox - http://jsfiddle.net/Gajotres/ktbcP/
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true, "dateFormat": "mm/dd/YYYY"}'/>
More working examples can be found in this blog article.
Calendars
But if you want a real calendar implementation there one I have used, probably there are more but this one is responsive enough. While not create for jQuery Mobile specifically it will work just fine. Even if creating a normal site this plugin is a real monster.
FullCalendar - http://jsfiddle.net/Gajotres/ZSd2C/
In this example you can see how it reacts to smaller screens.
$(document).on('pageshow','#index',function(e,data){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
0
<input type="date" />
-
To link that date to your calendar/app, you may want to write a browser extension, get the extension to attach an On Hold event to every Date input on each page you browse.
It could be possible to open your calendar via URL link. If the calendar doesn't have a protocol-handler, you could write your own calendar app and assign it a protocol to handle
-
This only shows the date. But, how can we add an event to the phone's calendar. Say for instance, i want to add a fixture event to my phone's calendar in mobile web. – user694688 May 28 '13 at 10:46
-