Adding a datePicker in FullCalendar / custom button click
up vote
1
down vote
favorite
I added a datePicker (http://www.eyecon.ro/datepicker/) right below the FullCalendar (http://fullcalendar.io) page.
how can i attach this date picker to a custom button on the header of the fullcallendar and when the button is pressed the datepicker will show up?
thanks
UPDATE: added code
EDIT: code updated
the code i written so far is:
JS:
$(function () {
//...some code.....
//fullcalendar
$('#calendar').fullCalendar({
//...options
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
$('#calendar').fullCalendar('gotoDate', formated);
}
});
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
ASP:
<div>
<div id='calendar'></div>
</div>
<div>
<p id="date"></p>
</div>
datepicker fullcalendar
asked Jun 27 '16 at 20:12
athskar
119210
add a comment |
up vote
1
down vote
favorite
I added a datePicker (http://www.eyecon.ro/datepicker/) right below the FullCalendar (http://fullcalendar.io) page.
how can i attach this date picker to a custom button on the header of the fullcallendar and when the button is pressed the datepicker will show up?
thanks
UPDATE: added code
EDIT: code updated
the code i written so far is:
JS:
$(function () {
//...some code.....
//fullcalendar
$('#calendar').fullCalendar({
//...options
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
$('#calendar').fullCalendar('gotoDate', formated);
}
});
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
ASP:
<div>
<div id='calendar'></div>
</div>
<div>
<p id="date"></p>
</div>
datepicker fullcalendar
asked Jun 27 '16 at 20:12
athskar
119210
Can you at least provide some code of what you have tried so far?
– Yuri
Jun 28 '16 at 6:37
updated the question with code
– athskar
Jun 28 '16 at 23:10
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I added a datePicker (http://www.eyecon.ro/datepicker/) right below the FullCalendar (http://fullcalendar.io) page.
how can i attach this date picker to a custom button on the header of the fullcallendar and when the button is pressed the datepicker will show up?
thanks
UPDATE: added code
EDIT: code updated
the code i written so far is:
JS:
$(function () {
//...some code.....
//fullcalendar
$('#calendar').fullCalendar({
//...options
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
$('#calendar').fullCalendar('gotoDate', formated);
}
});
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
ASP:
<div>
<div id='calendar'></div>
</div>
<div>
<p id="date"></p>
</div>
datepicker fullcalendar
asked Jun 27 '16 at 20:12
athskar
119210
I added a datePicker (http://www.eyecon.ro/datepicker/) right below the FullCalendar (http://fullcalendar.io) page.
how can i attach this date picker to a custom button on the header of the fullcallendar and when the button is pressed the datepicker will show up?
thanks
UPDATE: added code
EDIT: code updated
the code i written so far is:
JS:
$(function () {
//...some code.....
//fullcalendar
$('#calendar').fullCalendar({
//...options
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
$('#calendar').fullCalendar('gotoDate', formated);
}
});
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
ASP:
<div>
<div id='calendar'></div>
</div>
<div>
<p id="date"></p>
</div>
datepicker fullcalendar
datepicker fullcalendar
asked Jun 27 '16 at 20:12
athskar
119210
asked Jun 27 '16 at 20:12
athskar
119210
edited Jun 30 '16 at 9:26
asked Jun 27 '16 at 20:12
athskar
119210
asked Jun 27 '16 at 20:12
athskar
119210
asked Jun 27 '16 at 20:12
athskar
119210
119210
Can you at least provide some code of what you have tried so far?
– Yuri
Jun 28 '16 at 6:37
updated the question with code
– athskar
Jun 28 '16 at 23:10
add a comment |
Can you at least provide some code of what you have tried so far?
– Yuri
Jun 28 '16 at 6:37
updated the question with code
– athskar
Jun 28 '16 at 23:10
Can you at least provide some code of what you have tried so far?
– Yuri
Jun 28 '16 at 6:37
Can you at least provide some code of what you have tried so far?
– Yuri
Jun 28 '16 at 6:37
updated the question with code
– athskar
Jun 28 '16 at 23:10
updated the question with code
– athskar
Jun 28 '16 at 23:10
add a comment |
2 Answers
2
active
oldest
votes
up vote
3
down vote
Have you looked at fullcalendar custom buttons?
customButtons documentation
You should be able to do something like this:
$(function () {
//... some code....
// for the date picker
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
//when user clicks the date it scrols back up
$('#calendar').fullCalendar('gotoDate', formated);
$('body,html').animate({
scrollTop: 0
}, 800);
$('#date').DatePickerHide();
}
});
$('#calendar').fullCalendar({
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
//it scrolls to the position of the datepicker
$('body,html').animate({
scrollTop: $(document).height()
}, 1000);
$('#date').DatePickerShow();
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
answered Jun 28 '16 at 10:08
Ally Murray
4541514
I am using custom buttons, updated the queston with code. The problem is that when i put the $('date')...... inside the custom button the date picker does not open at all.
– athskar
Jun 28 '16 at 23:09
@athskar You are scrolling down the page to the datepicker but aren't doing anything to show it. I had a look at the documentation and it states you can just call show or hide. I have updated my answer to use your code and added the calls to to show and hide.
– Ally Murray
Jun 29 '16 at 8:29
@athskar When you call the invocation code if it is displayed by default just hide it after it's initialised. Then you can show/hide it as above.
– Ally Murray
Jun 29 '16 at 8:34
1
I think I have misunderstood what you were originally trying to achieve. When you said how can you attach it to the button and you had code to scroll to it I thought you wanted it displayed below the calendar and then you wanted to show/hide it when you pressed the button. To have it display below the button I personally would use Javascript or Jquery to append the datepicker div where you want in your document ready function.
– Ally Murray
Jun 30 '16 at 9:41
1
Try appending it right below the button element. Check out the two examples at the bottom of the datepicker site eyecon.ro/datepicker You would then just close it when the onChange event is triggered. It looks like it will be reasonably straight forward, I won't be home until late tonight but I can give it a try when I get home.
– Ally Murray
Jun 30 '16 at 10:53
|
show 2 more comments
up vote
3
down vote
I'm trying to do the same thing : adding jquery datepicker to fullcalendar custom button.
Does anyone know how to do this?
The best I can do is declaring both, one on top of the other, and linking datepicker select event to fullcalendar update view event (see sample below).
It works fine but what I want is declaring datepicker inside fullcalendar custom button rather than outhere in a div.
Thanks for your feedbacks!
Sample of what I'm doing :
$(document).ready(function () {
$('#datepicker').datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: " ",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
$('#datepicker').datepicker("show");
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
});
(...)
<p>Date <input type="text" id="datepicker"></p>
<div id='calendar'></div>
LATER:
Thanks to : This github fullcalendar issue I've been able to had a datepicker to fullcalendar header custom button.
This is how to proceed :
$(document).ready(function () {
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
var $btnCustom = $('.fc-datePickerButton-button'); // name of custom button in the generated code
$btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>');
$("#hiddenDate").datepicker({
showOn: "button",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI
//Below are required for manipulating dynamically created datepicker on custom button click
$("#hiddenDate").show().focus().hide();
$btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox
$btnDatepicker.hide();
$btnDatepicker.remove();
$("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
answered Aug 25 '16 at 9:39
Marie Cécile
20115
add a comment |
protected by Community♦ Nov 9 at 21:05
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
Have you looked at fullcalendar custom buttons?
customButtons documentation
You should be able to do something like this:
$(function () {
//... some code....
// for the date picker
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
//when user clicks the date it scrols back up
$('#calendar').fullCalendar('gotoDate', formated);
$('body,html').animate({
scrollTop: 0
}, 800);
$('#date').DatePickerHide();
}
});
$('#calendar').fullCalendar({
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
//it scrolls to the position of the datepicker
$('body,html').animate({
scrollTop: $(document).height()
}, 1000);
$('#date').DatePickerShow();
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
answered Jun 28 '16 at 10:08
Ally Murray
4541514
I am using custom buttons, updated the queston with code. The problem is that when i put the $('date')...... inside the custom button the date picker does not open at all.
– athskar
Jun 28 '16 at 23:09
@athskar You are scrolling down the page to the datepicker but aren't doing anything to show it. I had a look at the documentation and it states you can just call show or hide. I have updated my answer to use your code and added the calls to to show and hide.
– Ally Murray
Jun 29 '16 at 8:29
@athskar When you call the invocation code if it is displayed by default just hide it after it's initialised. Then you can show/hide it as above.
– Ally Murray
Jun 29 '16 at 8:34
1
I think I have misunderstood what you were originally trying to achieve. When you said how can you attach it to the button and you had code to scroll to it I thought you wanted it displayed below the calendar and then you wanted to show/hide it when you pressed the button. To have it display below the button I personally would use Javascript or Jquery to append the datepicker div where you want in your document ready function.
– Ally Murray
Jun 30 '16 at 9:41
1
Try appending it right below the button element. Check out the two examples at the bottom of the datepicker site eyecon.ro/datepicker You would then just close it when the onChange event is triggered. It looks like it will be reasonably straight forward, I won't be home until late tonight but I can give it a try when I get home.
– Ally Murray
Jun 30 '16 at 10:53
|
show 2 more comments
up vote
3
down vote
Have you looked at fullcalendar custom buttons?
customButtons documentation
You should be able to do something like this:
$(function () {
//... some code....
// for the date picker
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
//when user clicks the date it scrols back up
$('#calendar').fullCalendar('gotoDate', formated);
$('body,html').animate({
scrollTop: 0
}, 800);
$('#date').DatePickerHide();
}
});
$('#calendar').fullCalendar({
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
//it scrolls to the position of the datepicker
$('body,html').animate({
scrollTop: $(document).height()
}, 1000);
$('#date').DatePickerShow();
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
answered Jun 28 '16 at 10:08
Ally Murray
4541514
I am using custom buttons, updated the queston with code. The problem is that when i put the $('date')...... inside the custom button the date picker does not open at all.
– athskar
Jun 28 '16 at 23:09
@athskar You are scrolling down the page to the datepicker but aren't doing anything to show it. I had a look at the documentation and it states you can just call show or hide. I have updated my answer to use your code and added the calls to to show and hide.
– Ally Murray
Jun 29 '16 at 8:29
@athskar When you call the invocation code if it is displayed by default just hide it after it's initialised. Then you can show/hide it as above.
– Ally Murray
Jun 29 '16 at 8:34
1
I think I have misunderstood what you were originally trying to achieve. When you said how can you attach it to the button and you had code to scroll to it I thought you wanted it displayed below the calendar and then you wanted to show/hide it when you pressed the button. To have it display below the button I personally would use Javascript or Jquery to append the datepicker div where you want in your document ready function.
– Ally Murray
Jun 30 '16 at 9:41
1
Try appending it right below the button element. Check out the two examples at the bottom of the datepicker site eyecon.ro/datepicker You would then just close it when the onChange event is triggered. It looks like it will be reasonably straight forward, I won't be home until late tonight but I can give it a try when I get home.
– Ally Murray
Jun 30 '16 at 10:53
|
show 2 more comments
up vote
3
down vote
up vote
3
down vote
Have you looked at fullcalendar custom buttons?
customButtons documentation
You should be able to do something like this:
$(function () {
//... some code....
// for the date picker
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
//when user clicks the date it scrols back up
$('#calendar').fullCalendar('gotoDate', formated);
$('body,html').animate({
scrollTop: 0
}, 800);
$('#date').DatePickerHide();
}
});
$('#calendar').fullCalendar({
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
//it scrolls to the position of the datepicker
$('body,html').animate({
scrollTop: $(document).height()
}, 1000);
$('#date').DatePickerShow();
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
answered Jun 28 '16 at 10:08
Ally Murray
4541514
Have you looked at fullcalendar custom buttons?
customButtons documentation
You should be able to do something like this:
$(function () {
//... some code....
// for the date picker
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
//when user clicks the date it scrols back up
$('#calendar').fullCalendar('gotoDate', formated);
$('body,html').animate({
scrollTop: 0
}, 800);
$('#date').DatePickerHide();
}
});
$('#calendar').fullCalendar({
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
//it scrolls to the position of the datepicker
$('body,html').animate({
scrollTop: $(document).height()
}, 1000);
$('#date').DatePickerShow();
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$
answered Jun 28 '16 at 10:08
Ally Murray
4541514
edited Jun 29 '16 at 8:27
answered Jun 28 '16 at 10:08
Ally Murray
4541514
answered Jun 28 '16 at 10:08
Ally Murray
4541514
answered Jun 28 '16 at 10:08
Ally Murray
4541514
4541514
I am using custom buttons, updated the queston with code. The problem is that when i put the $('date')...... inside the custom button the date picker does not open at all.
– athskar
Jun 28 '16 at 23:09
@athskar You are scrolling down the page to the datepicker but aren't doing anything to show it. I had a look at the documentation and it states you can just call show or hide. I have updated my answer to use your code and added the calls to to show and hide.
– Ally Murray
Jun 29 '16 at 8:29
@athskar When you call the invocation code if it is displayed by default just hide it after it's initialised. Then you can show/hide it as above.
– Ally Murray
Jun 29 '16 at 8:34
1
I think I have misunderstood what you were originally trying to achieve. When you said how can you attach it to the button and you had code to scroll to it I thought you wanted it displayed below the calendar and then you wanted to show/hide it when you pressed the button. To have it display below the button I personally would use Javascript or Jquery to append the datepicker div where you want in your document ready function.
– Ally Murray
Jun 30 '16 at 9:41
1
Try appending it right below the button element. Check out the two examples at the bottom of the datepicker site eyecon.ro/datepicker You would then just close it when the onChange event is triggered. It looks like it will be reasonably straight forward, I won't be home until late tonight but I can give it a try when I get home.
– Ally Murray
Jun 30 '16 at 10:53
|
show 2 more comments
I am using custom buttons, updated the queston with code. The problem is that when i put the $('date')...... inside the custom button the date picker does not open at all.
– athskar
Jun 28 '16 at 23:09
@athskar You are scrolling down the page to the datepicker but aren't doing anything to show it. I had a look at the documentation and it states you can just call show or hide. I have updated my answer to use your code and added the calls to to show and hide.
– Ally Murray
Jun 29 '16 at 8:29
@athskar When you call the invocation code if it is displayed by default just hide it after it's initialised. Then you can show/hide it as above.
– Ally Murray
Jun 29 '16 at 8:34
1
I think I have misunderstood what you were originally trying to achieve. When you said how can you attach it to the button and you had code to scroll to it I thought you wanted it displayed below the calendar and then you wanted to show/hide it when you pressed the button. To have it display below the button I personally would use Javascript or Jquery to append the datepicker div where you want in your document ready function.
– Ally Murray
Jun 30 '16 at 9:41
1
Try appending it right below the button element. Check out the two examples at the bottom of the datepicker site eyecon.ro/datepicker You would then just close it when the onChange event is triggered. It looks like it will be reasonably straight forward, I won't be home until late tonight but I can give it a try when I get home.
– Ally Murray
Jun 30 '16 at 10:53
I am using custom buttons, updated the queston with code. The problem is that when i put the $('date')...... inside the custom button the date picker does not open at all.
– athskar
Jun 28 '16 at 23:09
I am using custom buttons, updated the queston with code. The problem is that when i put the $('date')...... inside the custom button the date picker does not open at all.
– athskar
Jun 28 '16 at 23:09
@athskar You are scrolling down the page to the datepicker but aren't doing anything to show it. I had a look at the documentation and it states you can just call show or hide. I have updated my answer to use your code and added the calls to to show and hide.
– Ally Murray
Jun 29 '16 at 8:29
@athskar You are scrolling down the page to the datepicker but aren't doing anything to show it. I had a look at the documentation and it states you can just call show or hide. I have updated my answer to use your code and added the calls to to show and hide.
– Ally Murray
Jun 29 '16 at 8:29
@athskar When you call the invocation code if it is displayed by default just hide it after it's initialised. Then you can show/hide it as above.
– Ally Murray
Jun 29 '16 at 8:34
@athskar When you call the invocation code if it is displayed by default just hide it after it's initialised. Then you can show/hide it as above.
– Ally Murray
Jun 29 '16 at 8:34
1
1
I think I have misunderstood what you were originally trying to achieve. When you said how can you attach it to the button and you had code to scroll to it I thought you wanted it displayed below the calendar and then you wanted to show/hide it when you pressed the button. To have it display below the button I personally would use Javascript or Jquery to append the datepicker div where you want in your document ready function.
– Ally Murray
Jun 30 '16 at 9:41
I think I have misunderstood what you were originally trying to achieve. When you said how can you attach it to the button and you had code to scroll to it I thought you wanted it displayed below the calendar and then you wanted to show/hide it when you pressed the button. To have it display below the button I personally would use Javascript or Jquery to append the datepicker div where you want in your document ready function.
– Ally Murray
Jun 30 '16 at 9:41
1
1
Try appending it right below the button element. Check out the two examples at the bottom of the datepicker site eyecon.ro/datepicker You would then just close it when the onChange event is triggered. It looks like it will be reasonably straight forward, I won't be home until late tonight but I can give it a try when I get home.
– Ally Murray
Jun 30 '16 at 10:53
Try appending it right below the button element. Check out the two examples at the bottom of the datepicker site eyecon.ro/datepicker You would then just close it when the onChange event is triggered. It looks like it will be reasonably straight forward, I won't be home until late tonight but I can give it a try when I get home.
– Ally Murray
Jun 30 '16 at 10:53
|
show 2 more comments
up vote
3
down vote
I'm trying to do the same thing : adding jquery datepicker to fullcalendar custom button.
Does anyone know how to do this?
The best I can do is declaring both, one on top of the other, and linking datepicker select event to fullcalendar update view event (see sample below).
It works fine but what I want is declaring datepicker inside fullcalendar custom button rather than outhere in a div.
Thanks for your feedbacks!
Sample of what I'm doing :
$(document).ready(function () {
$('#datepicker').datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: " ",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
$('#datepicker').datepicker("show");
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
});
(...)
<p>Date <input type="text" id="datepicker"></p>
<div id='calendar'></div>
LATER:
Thanks to : This github fullcalendar issue I've been able to had a datepicker to fullcalendar header custom button.
This is how to proceed :
$(document).ready(function () {
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
var $btnCustom = $('.fc-datePickerButton-button'); // name of custom button in the generated code
$btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>');
$("#hiddenDate").datepicker({
showOn: "button",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI
//Below are required for manipulating dynamically created datepicker on custom button click
$("#hiddenDate").show().focus().hide();
$btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox
$btnDatepicker.hide();
$btnDatepicker.remove();
$("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
answered Aug 25 '16 at 9:39
Marie Cécile
20115
add a comment |
up vote
3
down vote
I'm trying to do the same thing : adding jquery datepicker to fullcalendar custom button.
Does anyone know how to do this?
The best I can do is declaring both, one on top of the other, and linking datepicker select event to fullcalendar update view event (see sample below).
It works fine but what I want is declaring datepicker inside fullcalendar custom button rather than outhere in a div.
Thanks for your feedbacks!
Sample of what I'm doing :
$(document).ready(function () {
$('#datepicker').datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: " ",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
$('#datepicker').datepicker("show");
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
});
(...)
<p>Date <input type="text" id="datepicker"></p>
<div id='calendar'></div>
LATER:
Thanks to : This github fullcalendar issue I've been able to had a datepicker to fullcalendar header custom button.
This is how to proceed :
$(document).ready(function () {
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
var $btnCustom = $('.fc-datePickerButton-button'); // name of custom button in the generated code
$btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>');
$("#hiddenDate").datepicker({
showOn: "button",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI
//Below are required for manipulating dynamically created datepicker on custom button click
$("#hiddenDate").show().focus().hide();
$btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox
$btnDatepicker.hide();
$btnDatepicker.remove();
$("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
answered Aug 25 '16 at 9:39
Marie Cécile
20115
add a comment |
up vote
3
down vote
up vote
3
down vote
I'm trying to do the same thing : adding jquery datepicker to fullcalendar custom button.
Does anyone know how to do this?
The best I can do is declaring both, one on top of the other, and linking datepicker select event to fullcalendar update view event (see sample below).
It works fine but what I want is declaring datepicker inside fullcalendar custom button rather than outhere in a div.
Thanks for your feedbacks!
Sample of what I'm doing :
$(document).ready(function () {
$('#datepicker').datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: " ",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
$('#datepicker').datepicker("show");
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
});
(...)
<p>Date <input type="text" id="datepicker"></p>
<div id='calendar'></div>
LATER:
Thanks to : This github fullcalendar issue I've been able to had a datepicker to fullcalendar header custom button.
This is how to proceed :
$(document).ready(function () {
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
var $btnCustom = $('.fc-datePickerButton-button'); // name of custom button in the generated code
$btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>');
$("#hiddenDate").datepicker({
showOn: "button",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI
//Below are required for manipulating dynamically created datepicker on custom button click
$("#hiddenDate").show().focus().hide();
$btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox
$btnDatepicker.hide();
$btnDatepicker.remove();
$("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
answered Aug 25 '16 at 9:39
Marie Cécile
20115
I'm trying to do the same thing : adding jquery datepicker to fullcalendar custom button.
Does anyone know how to do this?
The best I can do is declaring both, one on top of the other, and linking datepicker select event to fullcalendar update view event (see sample below).
It works fine but what I want is declaring datepicker inside fullcalendar custom button rather than outhere in a div.
Thanks for your feedbacks!
Sample of what I'm doing :
$(document).ready(function () {
$('#datepicker').datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: " ",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
$('#datepicker').datepicker("show");
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
});
(...)
<p>Date <input type="text" id="datepicker"></p>
<div id='calendar'></div>
LATER:
Thanks to : This github fullcalendar issue I've been able to had a datepicker to fullcalendar header custom button.
This is how to proceed :
$(document).ready(function () {
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
var $btnCustom = $('.fc-datePickerButton-button'); // name of custom button in the generated code
$btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>');
$("#hiddenDate").datepicker({
showOn: "button",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI
//Below are required for manipulating dynamically created datepicker on custom button click
$("#hiddenDate").show().focus().hide();
$btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox
$btnDatepicker.hide();
$btnDatepicker.remove();
$("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
answered Aug 25 '16 at 9:39
Marie Cécile
20115
edited Aug 25 '16 at 12:46
answered Aug 25 '16 at 9:39
Marie Cécile
20115
answered Aug 25 '16 at 9:39
Marie Cécile
20115
answered Aug 25 '16 at 9:39
Marie Cécile
20115
20115
add a comment |
add a comment |
protected by Community♦ Nov 9 at 21:05
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
Can you at least provide some code of what you have tried so far?
– Yuri
Jun 28 '16 at 6:37
updated the question with code
– athskar
Jun 28 '16 at 23:10