is there a way to show only dates from today. Not need to display past events and days.
If today is monday 15 March 2012, calendar start from today and display days to 15 April 2012.
Or from current week one month next.
It can be easily achieved by iterating through fullcalendar events with classname fc-future. Here, is an example, where I'm adding a button for each future date.
eventAfterAllRender: function (event) {
if(event.name == 'month')
{
$('.fc-day.fc-future').each(function(){
$(this).css('position','relative');
$(this).append('<button type="button" style="position:absolute;bottom:0;left:0;right:0;" class="btn btn-primary" data-toggle="modal" data-target="#XYZRequest">\n' +
'<i class="fa fa-calendar-plus-o requestSlot fc-day-number" aria-hidden="true"></i>' +
'</button>');
});
}
},
you can use viewRender to disable or enable prev/next button for future or past dates, by setting start date to control start date(I set current date as start date).
here is the code
viewRender: function (view, element)
{
var minDate = new Date();
if (view.start <= minDate) {
$('.fc-button-prev').addClass("fc-state-disabled");
}
else {
$('.fc-button-prev').removeClass("fc-state-disabled");
}
}
vice versa for end date
Use the ViewDisplay option
viewDisplay : function(view) {
date = new Date() //is today's date.
if((date - view.start) > 0) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }
if((view.end - date) > 7809463201) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
},
Related
I have:
<div class="show-schedule"></div>
From date: <input id="start-at" type="date">
To date: <input id="end-at" type="date">
$('#start-at, #end-at').change(function(){
from_date = moment($('#start-at').val(), "YYYY-MM-DD");
to_date = moment($('#end-at').val(), "YYYY-MM-DD").add(1, 'days');
if (from_date._i.length == 0 && to_date._i.length == 0){
$('.show-schedule').fullCalendar('option', 'validRange', {});
}
else if (from_date._i.length != 0 && to_date._i.length == 0){
$('.show-schedule').fullCalendar('option',
'validRange', {start: from_date});
}
else if (from_date._i.length == 0 && to_date._i.length != 0){
$('.show-schedule').fullCalendar('option',
'validRange', {end: to_date});
}
else {
if (from_date < to_date){
$('.show-schedule').fullCalendar('option',
'validRange', {start: from_date, end: to_date});
}
else {
$('#start-at').val('');
$('#start-at').focus();
}
}
});
For example:
this month is March, if I choose January or February, I will not show me January or February, forcing me to press the PREV button to display it! How do I show last month without pressing the PREV button?
Or anyone have a way to filter from one day to another? Please help me!
I want to make a choice of time from date to date like : from date: to date: how to handle? Please help me! thankss!!!
You can use the "gotoDate" method:
$('#start-at').change(function() {
var from_date = moment($('#start-at').val(), "YYYY-MM-DD");
if (from_date.isValid()){
$('.show-schedule').fullCalendar('gotoDate', from_date);
}
});
This will move the calendar to the date specified, keeping the view type the same.
See https://fullcalendar.io/docs/gotoDate for more.
I am using the fullcalendar library. How can i restrict my months view to only see the next x number months?
I dont see any straight forward answers to this in the documentation. I am not sure if I am supposed to try and alter the render methods?
Thanks
This should do the trick for you
$('#calendar').fullCalendar({
viewDisplay: function(view) {
// maybe return false aborts action?
if (view.start > lastDayOfNextMonth) {
return false;
}
// or disable next button if this is last valid month
if (view.end + oneDay >= lastValidDate) {
$("#calendar #fc-button-next").attr("disabled","disabled");
}
// or gotoDate if view.start is out of range
if (view.start > lastValidDate) {
// proceed
}
}
});
This question has a bunch of samples: FullCalendar examples
I have created an event post type in Wordpress. For that I have put starting date and ending date from ACF datepicker.
I want admin can select Ending date greater than Starting Date.
Is there any way for restricting Starting Date and Ending Date?
For example, if Admin choose 1st Jan 2016 as starting date, then he can only select the ending date 1st Jan or greater then the selected date.
I think we can do it with java script and use this code to set the limit of the end date :
$( ".selector" ).datepicker({
minDate: new Date( )
});
I think there is no possibilities for date restriction in acf in admin area.
I may be done in acf's newer version.
You can request from here...
http://support.advancedcustomfields.com/forums/forum/feature-requests/
I had similar problem with regular date fields, Hope this JS code (with the moment JS library) with some adjustments will help you.
$(document).ready(function() {
$("input[name='Arrival']").change(function() {
var date_picked = $("input[name='Arrival']").val();
var SpecialTo = moment(date_picked, "YYYY-MM-DD");
var today = new Date();
today.setDate(today.getDate() - 240);
var selectedDate = new Date(date_picked);
if (today <= selectedDate) {
//alert('Date is today or in future');
} else {
alert('Date is in the past');
$("input[name='Arrival']").val('');
}
});
})
If you could post the source HTML of the date input with a value, I could change it probably to what you looking for.
This works just fine. Just get the name fields with inspect element. Add this code in the functions.php file.
add_action('acf/validate_save_post', 'my_acf_validate_save_post', 10, 0);
/**
* #throws Exception
*/
function my_acf_validate_save_post() {
$start = $_POST['acf']['field_61a7519a57d99'];
$end = $_POST['acf']['field_61a751d957d9a'];
// check custom $_POST data
if ($start > $end) {
acf_add_validation_error('acf[field_61a751d957d9a]', 'End date should be greater than or equal to start date.');
}
}
When you open inspect element the input field should look like this:
<div class="acf-date-picker acf-input-wrap" data-date_format="dd. MM yy" data-first_day="1">
<input type="hidden" id="acf-field_61a751d957d9a" name="acf[field_61a751d957d9a]" value="20211201">
<input type="text" class="input hasDatepicker" value="16. January 2022" id="dp1638477022818">
</div>
More information you can find here:
https://www.advancedcustomfields.com/resources/acf-validate_save_post/
I would like to have two date field in my Wordpress contact form 7. A start-date and an end-date. The fields will be datepickers from the "Contact Form 7 Datepicker" plugin.
When visitor has selected a start-date he should only be able to select an end date that is 4 days later then the start-date.
How can I achieve this by only using the "contact form 7" form creator?
This is the syntax I put in the "contact form 7".
Start date charter*:
[date* date-start date-format:MM_d_yy]
End date charter*:
[date* date-end date-format:MM_d_yy]
And I added this code to the end of the functions file of the Wordpress theme.
function calendar_js(){
?>
<script>
jQuery(function($){
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.on('change', function() {
var start_date = $(this).datepicker('getDate');
start_date.setDate(start_date.getDate() + 3);
end.datepicker('option', 'minDate', start_date);
});
});
</script>
<?php
}
add_action('wp_footer', 'calendar_js');
Now the second date picker must be at least 4 days later then the first date picker.
May be this plugin will help you. This plugin works along with CF 7
http://wordpress.org/plugins/contact-form-7-datepicker/
And you can add your own javascript for date manipulation after adding datepicker in CF 7.
Example:
jQuery(document).ready(function($) {
$( ".from" ).datepicker({
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( ".to" ).datepicker({
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
2021 Update: Contact form 7 datepicker was removed from wordpress repository due to security reasons
https://blog.cf7skins.com/contact-form-7-datepicker-removed-security-vulnerability/
You can try the WP-Datepicker by Fahad Mahmood
This is my solution without the use of plugins,
this is the code of the CF7 fields:
Start date charter *:
[date* date-start]
End date charter *:
[date* date-end]
this is the code added in the functions.php file:
add_action('wp_footer', 'calendar_js');
function calendar_js()
{
?>
<script>
jQuery(function($)
{
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.datepicker ({dateFormat: 'yy-mm-dd', beforeShow: function() { $(this).datepicker('option','maxDate',end.datepicker('getDate')); } });
end.datepicker ({dateFormat: 'yy-mm-dd', beforeShow: function() { $(this).datepicker('option','minDate',start.datepicker('getDate')); } });
});
</script>
<?php
}
There is no way to achieve it with the form builder directly, but with a bit of JavaScript you can validate the second input field to get your desired behaviour.
Here is an example, that falls back to the earliest date possible once a date is selected, that is out of scope.
<input type=date class=c-date-start>
<input type=date class=c-date-end>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Add the below code to the page your form is located -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script>
jQuery(($) => {
const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4
// Only allow dates in date end field that are after the date start field plus the minimum buffer
dateEnd.on('change', () => {
const startDate = dateStart.val()
const endDate = dateEnd.val()
if (startDate && endDate) {
const startDateMoment = moment(startDate)
const endDateMoment = moment(endDate)
const minDate = startDateMoment.clone().add(minBuffer, 'days')
if (endDateMoment.isBefore(minDate)) {
dateEnd.val(minDate.format('YYYY-MM-DD'))
}
}
})
})
</script>
On WordPress, you probably do not need to load jQuery extra and for the form markup you can add the classes in the CF7 builder like so:
[date date-427 class:c-date-start]
[date date-427 class:c-date-end]
Change the selectors and the minimum timespan according to your needs by adjusting the following declarations inside the source:
const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4
I have FullCalendar installed and working great, pulling in courses from my database.
You can view different courses based on clicking a button that submits the page again but passes different criteria.
The Issue is that on reloading of the page and the new content it skips back to the current date which is rather annoying when when you are looking at courses 3 months into the future!!
Does anybody know how to make the calendar go back to the page you where on after you have refreshed the page???
I have a feeling it might be something to do with getdate as I got the following code to work but can't seem to pass the result back through the URL and into the calendar setup.
$('#my-button').click(function() {
var d = $('#calendar').fullCalendar('getDate');
alert("The current date of the calendar is " + d);
});
If you use jquery.cookie you can store the currently viewed date in a cookie for the page being viewed and use that value to set the defaultDate when the page reloads. Pass these in as options when you initialise your calendar:
defaultView: Cookies.get('fullCalendarCurrentView') || 'month',
defaultDate: Cookies.get('fullCalendarCurrentDate') || null,
viewRender: function(view) {
Cookies.set('fullCalendarCurrentView', view.name, {path: ''});
Cookies.set('fullCalendarCurrentDate', view.intervalStart.format(), {path: ''});
}
This code also saves the current view (e.g. month, day etc...)
I used a combination of the two above. I set the localStorage value for the start date when creating, moving, or resizing an event as well as viewRender and then assigned that value to the defaultDate.
defaultDate: localStorage.getItem('Default_FullCalendar_Date'),
viewRender: function(view) {
localStorage.setItem('Default_FullCalendar_View', view.name);
...
},
select: function(start, due){
localStorage.setItem('Default_FullCalendar_View', start);
...
},
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view){
localStorage.setItem('Default_FullCalendar_View', event._start._d);
...
},
eventResize: function(event, delta, revertFunc, jsEvent, ui, view){
localStorage.setItem('Default_FullCalendar_View', event._start._d);
...
}
Works like a charm.
You can use gotoDate method:
var d = $('#calendar').fullCalendar('getDate');
$('#calencar').fullCalendar( 'gotoDate', d.getFullYear(), d.getMonth(), d.getDate() )
Here is an updated answer for version 4 and 5 of fullcalendar.
since viewRender is no longer an option in these versions. I came up with a different approach using the loading option.
The loading option will give you a boolean argument stating whether the calendar is done loading or not. Inside that function I check if the calendar is done loading and if so, I set the calendar date to localStorage. Next I created an if else statement before the fullcalendar object to check if the localstorage item exists, and if so I set the defaultDate option in the calendar object to to localStorage date; if not, I just set it to today's date.
Example:
let viewDate;
const savedDate = localStorage.getItem("calDate");
if (savedDate !== null) {
viewDate = new Date(savedDate);
} else {
viewDate = today();
}
const calendarElement = document.getElementById('your_calendar');
const calendar = new FullCalendar.Calendar(calendarElement, {
defaultDate: viewDate,
loading: function(stillLoading) {
if (stillLoading === false) {
// When Calendar is done loading....
localStorage.setItem("calDate", calendar.getDate());
}
},
});