Using V-Calendar, how can I render the calendar with it open to a specific month that's in the past? Instead of the current month.
I'm trying the following:
Html:
<v-calendar :attributes="attributes"...></v-calendar>
JS:
<script setup>
const attributes = ref([
{
id: 'some-random-id',
dates: new Date(2018,3,1)
}
])
</script>
Yet it still opens to the current month, instead of the month I want from 2018. I'm hoping to avoid doing a .move('2018-03-01') inside of onMounted because if I do that, then the UI does a "flicker", where it initially loads to current month, then transitions to the 2018 month. Thanks.
The prop you want to use is from-page
Description: The page (month, year) for the first calendar pane located at row 0 and column 0. Use the .sync modifier for two-way binding.
<template>
<v-calendar :from-page="date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref({});
return {
date
};
},
mounted() {
this.date = { month: 3, year: 2018 };
}
};
</script>
Related
I'm using Fullcalendar 5 timeGrid view and I'm trying to add the number of events of the day into each day header.
I saw we can use the dayHeaderContent like that
calendarOptions = {
dayHeaderContent({ date, text, view }) {
return text + ' suffix';
}
// ...
}
This adds ' suffix' after each day header.
We can access the events through the api, but the day header is called just once and before receiving the events from the sources.
One can call api.render() to trigger the day header rendering, but that means almost everything gets rendered twice. Additionally I don't see when render() could be called. From an event source callback, events seem not updated just after the successCallback.
Example:
calendarOptions = {
eventSources: [
{
id: 'time-entries',
events(fetchInfo, successCallback) {
const events = getTheEvents();
successCallback(events);
fcApi.render(); // dayHeaderContent still shows the previous events
},
},
],
// ...
}
How can I effectively show the number of events on each day header ?
My goal is to let users create vue components based on objects using resolveDynamicComponent. While refresh page, render and data binding goes well, but after that, it gets some error and makes the rendered item disappear.
<template>
<abc/>
</template>
<script setup>
import {resolveDynamicComponent} from 'vue'
const abc = resolveDynamicComponent(
{
name: 'abc',
setup: () => {
const test = 'Test'
},
template: '<div>{{test}}</div>'
}
)
</script>
Error
Hydration completed but contains mismatches.
hydrate # runtime-core.esm-bundler.js:3136
I am starting to work with ngb-datepicker and I would like to know if it is possible to change the background-color of one specific day, for example, the 8th of November.
HTML
<ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled"
#d="ngbDatepicker"></ngb-datepicker>
<ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled"
let-focused="focused">
<span class="custom-day" [class.weekend]="isMarkedDay(date)" [class.focused]="focused" [class.bg-primary]="selected"
[class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
{{ date.day }}
</span>
</ng-template>
Typescript
export class HistoryComponent implements OnInit {
model: NgbDateStruct;
accomplishedDays: NgbDate[] = [];
day = new Date().getDate();
month = new Date().getMonth() + 1;
year = new Date().getFullYear();
today: NgbDate = new NgbDate(this.year, this.month, this.day); // July, 14 1789
constructor(
public mockdataService: MockDataService,
private calendar: NgbCalendar
) {}
ngOnInit() {}
isDisabled = (date: NgbDate, current: { month: number }) =>
date.month !== current.month;
isMarkedDay = () => this.calendar.getToday() == this.today; // .getWeekday(date) >= this.today;
}
I have been trying it for a while but I am not able to make it work. Right now I am just trying to mark the current day but it does not work. I have checked in the console if this.calendar.getToday() and this.today prints the same and it does, but when comparing them is false.
Yes you can do it, you can provide custom HTML template for every day in the DP, where you can easily set css class based on the day.
check it in the documentation, there is also example
UPDATE
The dates you're comparing are JS objects and you can't compare them like that (you should learn something about JS Object comparison)
To compare them you can use built-in method on the NgbDate for comparing, so your code will look like this:
isMarkedDay = () => this.calendar.getToday().equals(this.today));
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());
}
},
});