start in validRange not display fullcalendar? - fullcalendar

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.

Related

Full calendar display event title in celendar each cell within start and end date range

I am using full calendar v3.0.1, I need to display event title in every day cell in calendar table.
Example:
start: 2017-01-01
end: 2017-01-10
Based on these dates, Expected output in calendar should be displaying event title in within start and end date range. meet5 title should show in each day cell within event range.
Current output:
Required Expected output
Any suggestions, How we can achieve this ?
Maybe you could try something like this:
$('#calendar').fullCalendar({
defaultView: 'month',
events: [{
title: 'Some quite long event description in a day cell',
start: '2017-01-05',
end: '2017-01-09',
rendering: 'background',
allDay: true
}],
eventAfterAllRender: function(view) {
$.each($('#calendar').fullCalendar('clientEvents'), function() {
var event = this;
var $start = $('#calendar').find('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]');
var $end = $('#calendar').find('td.fc-day[data-date="' + event.end.format('YYYY-MM-DD') + '"]');
if (event.rendering === 'background') {
for (var d = event.start; d <= event.end; d.add(1, 'day')) {
$('#calendar').find('td.fc-day[data-date="' + d.format('YYYY-MM-DD') + '"]').append('' + event.title + '');
}
}
});
}
});
Check this fiddle.
I noticed that you would like to have an event title below day number. Solution above is a bit different, but it should give you an idea how it could be done I hope.

Fullcalendar restrict view to today + x months

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

How can I restrict Two dates in ACF date picker for Starting date and Ending Date in Wordpress?

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/

Show link to absolute url if result is equal to string in MVC3 ASP

I have the following code which returns one of the 3 options ("Please check availability","Low Stock" or "Available") in a controller.
How can I change the view (2nd part in order to display a link "here" that will open a new window to an external url like "www.google.com" ?
First part is the controller , second part the view.
Thank you
if (model.ShowInventoryAvailability)
{
// Check to see if the system allows for webbackorder. If it does then we will say that we have 'available' inventory.
if (ApplicationSetting.GetByNameBoolean("Web_AllowBackOrder", true, "") && orderLine.Product.TrackInventory)
{
var inv = (Int32)(orderLine.Product.QtyOnHand - totalOrdered);
if (inv <= 0)
line.Availability = "Please check availability" ;
else if (inv < model.InventoryLowStockQuantity)
line.Availability = "Low Stock";
else
line.Availability = "Available";
}
else
{ }
}
#if (Model.ShowInventoryAvailability)
{
<td class="os-availability">
#cartLine.Availability
</td>
}
Assuming you want to add the url link when there is no stock you can check your text status or you could also add another property to the Model like the actual quantity and control the conditional statement via that property.
#if (Model.ShowInventoryAvailability)
{
<td class="os-availability">
if (cartLine.Availability == "Please check availability")
{
#Html.Link("http://www.google.com", "Here");
}
else
{
#cartLine.Availability
}
</td>
}

How to make FullCalendar to display only future dates

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"); }
},

Resources