It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
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.
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/'
}
]
});
});
<input type="date" />
New HTML5 Date input
-
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
Related
We have an issue with fullcalendar http://fullcalendar.io/. If we click on next, both May and June is showing 4th month. Click on next or previous button in header.
Are we missing something?
Code line:
alert('viewRender view month: ' + view.start._d.getMonth());
Fiddle Link https://jsfiddle.net/sudiptabanerjee/z7La379f/2/
JS:
$(document).ready(function () {
$('#calendar').fullCalendar({
// defaultDate: '2016-06-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
viewRender: function (view, element) {
alert('viewRender view month: ' + view.start._d.getMonth());
},
events: [
{
title: 'All Day Event',
start: '2016-06-01'
},
{
title: 'Long Event',
start: '2016-06-07',
end: '2016-06-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-06-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-06-16T16:00:00'
},
{
title: 'Conference',
start: '2016-06-11',
end: '2016-06-13'
},
{
title: 'Meeting',
start: '2016-06-12T10:30:00',
end: '2016-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-06-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-06-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-06-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-06-28'
}
]
});
});
HTML:
<div id='calendar'></div>
CSS:
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
background-color:#fff;
}
#calendar {
max-width: 600px;
margin: 0 auto;
}
Thanks in advance.
in JS, month start from 0,
0 - Jan
1 - Feb
2 - Mar
3 - Apr
4 - May
5 - June
When u navigate to May in month view the first day of the month is 1 (ie, May 1)
and for June the first day of the month is 29 (ie, May 29), both are May
the number for May is 4
it is showing the correct month,
EDIT
https://jsfiddle.net/z7La379f/3/
if you are looking to get the month of the current view you can do this
viewRender: function (view, element) {
// alert('viewRender element: '+element.start._d.getMonth());
// alert('viewRender view month: ' + view.start._d.getMonth());
var dt=moment(view.start).add(10,'days');
var mnth =moment(dt).month();
alert(mnth);
},
FullCalendar's documentatation for view says start is:
A Moment that is the first visible day.
In month-view, this value is often before the 1st day of the month, because most months do not begin on the first day-of-week.
(My emphasis.)
When you go to June, look at the day in the upper left-hand corner and observe what month it's in.
Side note: Don't use the undocumented internals of libraries. Instead of view.start._d.getMonth() use view.start.month() or view.start.toDate().getMonth().
I am currently doing some repeating event of fullCalendar in my code. However when switching to next/prev month, my event getting bug or disappear. I know that stick is needed but where should I put it when my code is like this?
var repeatingEvents = [{
title: sub[x],
start: tmefrm[x],
end: tmeto[x],
dow: [har[x]],
ranges: [{
start: moment(dtefrm[x]),
end: moment(dteto[x]),
}],
color: 'green',
}];
var getEvents = function( start, end ){
return repeatingEvents;
}
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
defaultView: 'month',
eventRender: function(event, element, view){
//console.log(event.start.format());
return (event.ranges.filter(function(range){
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length)>0;
},
events: function( start, end, timezone, callback ){
var events = getEvents(start,end); //this should be a JSON request
callback(events);
},
});
I read the docs which it says that event must be an Event Object with a title and start at the very least.
Unless my code is like this it will be easy.
var myCalendar = $('#calendar');
myCalendar.fullCalendar();
var myEvent = {
title: sub[x],
color: 'green',
start: tmefrm[x],
end: tmeto[x],
dow: [har[x]],
ranges: [{
start: new Date(dtefrm[x]),
end: new Date(dteto[x]),
}],
}
myCalendar.fullCalendar('renderEvent', myEvent, [ stick= true]);
What I do ? Is I want to use repeating event, and so far this code make me go far from previous progress but I'm not sure where to put this stick.
Any help would be great :)
It's simple!
myCalendar.fullCalendar('renderEvent', myEvent, true);
I am trying to re-size events functionality of full calendar. I am able to re-size all day events but i am unable to re-size events having end time and allDay false.
following are my events :
$scope.events = [
{id: 999,title: 'Full Day Event',start: new Date(y, m, d - 3, 16, 0),allDay: true},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
];
and this is my calendar config:
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
}
;
you can find the plunk here : plunker
please help
Thank you
UI Calendar is using FullCalendar behind the hood. The latter does not seems to have such functionnality. If an event is set as allDay: false it can only be resized in week mode. Here is a link to the related issue on Github https://github.com/angular-ui/ui-calendar/issues/207
I'm using FullCalendar to display events entered by users. As such, I can't control when they are scheduled for.
Strangely, someone has scheduled an event for 11:59pm, and it is basically invisible on FullCalendar's agenda view.
Here is a JSFiddle for the scenario I'm describing. The JS is copied below:
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: false,
contentHeight: 300,
defaultView: 'agendaDay',
scrollTime: '24:00:00',
allDaySlot: false,
slotDuration: '00:15:00',
slotEventOverlap: false,
forceEventDuration: true,
defaultTimedEventDuration: '00:30:00',
displayEventEnd: false,
editable: false,
events: [{
title: 'Earlier (visible) Event',
start: new Date(y, m, d, 22, 00)
}, {
title: 'Late (hard to see) Event',
start: new Date(y, m, d, 23, 59)
}]
});
});
As you'll see on JSFiddle, the "Late (hard to see) Event" renders just two pixels tall at the bottom of the calendar, which is unusable. Is there a solution for this? Maybe some way to view the day through 1am the next morning, for instance?
Add maxTime: "24:59:59". That will extend the agenda view beyond midnight making your event visible.
Here's the jsFiddle: http://jsfiddle.net/0tm5cgjb/2/
I am getting data from a DB for populating events in fullcalendar.js
I get this information prior to initiating $('#calendar').fullCalendar({})
If I knew how many events I was going to have I could create the calendar with the code below
events: [
eventz[0],
eventz[1]
]
Where eventz contain information like
eventz[eventcounter]={
className: title[counter],
title: title[counter],
start: new Date(y, m, weekday, result[hour1], result[minute1]),
end: new Date(y, m, weekday, result[hour2], result[minute2]),
allDay: false
};
EDIT: More information-events would normally contain information written like below
events:[
{//event1
title: 'TENTATIVE',
start: new Date(y, m, monday, 0, 30),
end: new Date(y, m, monday, 1, 0),
allDay: false
},
{//event2
title: 'TENTATIVE',
start: new Date(y, m, monday, 0, 30),
end: new Date(y, m, monday, 1, 0),
allDay: false
}
]
Unfortunately, I don't know how many events I'm going to get.
I thought that prior to initiating the calendar, I could combine the events into one object or variable (something like the code below-where allevents={eventz[0]},{eventz[1]}).
events: [
allevents
]
QUESTIONs
Is it possible to combine events into one object or variable like above? If yes, how? If no, I'd be interested in alternative methods for entering dynamic event data into fullcalendar. Thanks :)
WHAT I have tried
//combine all events into one
for (var i=0;i<=counter;i++)
{
allevents+=eventz[i];
if (i!=counter)
{
allevents+=',';
}
}
I've tried quite a few things, but this feels like I'm doing ridiculous stuff and this seems like an easy question (for people other than me).
I think this is what you are looking for.
Instead of using 'events' attribute use 'eventSources' attribute.
Before:
events : eventArrayFirst
After:
eventSources: [
eventArrayFirst,
eventArraySecond
]
I used array concatenation to solve my problem.
//Combines all events into one
if (eventcounter>0) //Check that there is an event!
{
var allevents=[eventz[0]];
for (var varname=1; varname<=eventcounter; varname++)
{
allevents=allevents.concat([eventz[varname]]);
}
}
If your final array after combining all the events in single array looks like
var eventz = [
{//event1
title: 'TENTATIVE',
start: new Date(y, m, monday, 0, 30),
end: new Date(y, m, monday, 1, 0),
allDay: false
},
{//event2
title: 'TENTATIVE',
start: new Date(y, m, monday, 0, 30),
end: new Date(y, m, monday, 1, 0),
allDay: false
}
];
Then this example may help you