I am working on VUE project where i can add range date event.
Example
const eventList = [{
status: "Pending",
title: "title",
start: "2022-10-19",
end: "2022-10-21",
// startTime: '10:00',
// endTime: '12:00',
}]
now what is want to also add time range for every event so that time range can be visible in week page and it should look like
The closest thing to what you've shown in your question is a simple recurring event.
For example:
{
status: "Pending",
title: "title",
startRecur: "2022-10-19",
endRecur: "2022-10-21",
startTime: '10:00',
endTime: '12:00',
}
This will create a series of events occurring between the times specified in startTime and endTime, which will show on every day between startRecur and endRecur (the end date being exclusive). See the documentation link above for more details and options.
Demo: https://codepen.io/ADyson82/pen/ExLBbNO
Related
I have a field that shows the current date and next to that is a counter where you can add one month to the current date. This was as intended, because I always want the current date to be the default one. But I would also like to allow my users to pick a different date and then count the months from that selected date. They can't do this right now. if they select a date and add one month, the date will automatically update to be todays date + 1 month.
How can I change this so that the default date is still the current date, while allowing users to select a different date and add one month to THAT date.
Eg. if today is 15/11/2022 and the user picks the 17th and adds one month, I would like the date to change to to 17/12/2022. Right now it will only change to 15/12/2022 even if the user enters the 17th.
<template>
<date-picker v-model="startDate" format="DD/MM/YYYY"/>
<b-form-spinbutton v-model="counter" min="0"/>
</template>
<script>
export default {
data() {
return {
counter: 0,
startDate: moment(new Date()).format('YYYY-MM-DD')
}
},
methods: {
populateDateAccordingly() {
this.startDate = moment().format('YYYY-MM-DD');
this.startDate = moment().add(this.counter, 'M').format('YYYY-MM-DD');
}
},
watch: {
counter : 'populateDateAccordingly'
},
}
}
</script>
I am using Vue2 Date Range Picker. When I try and pick a date range I either click a start and and end date or I select one of the ranges. In either case it shows the desired input in the fields, however when I click apply the end date changes to another date.
For example, I might click on the last quarter range and it displays 01-04-2022 → 30-06-2022, which is what I want. However when I click apply, it changes to 01-04-2022 → 30-01-2023. I have been pulling my hair out trying to figure out why.
I have the following configuration.
<date-range-picker
v-model="dateRange"
:controlContainerClass="'form-input'"
:locale-data="locale"
:ranges="ranges"
class="picker"
/>
dateRange: {
startDate: null,
endDate: null,
},
ranges: {
'Today': [today, today],
'Yesterday': [yesterday, yesterday],
'This Week': [start_of_week, today],
'Last Week': [start_of_last_week, end_of_last_week],
'This month': [start_of_month, end_of_month],
'Last month': [start_of_last_month, end_of_last_month],
'This Quarter': [start_of_quarter, end_of_quarter],
'Last Quarter': [start_of_last_quarter, end_of_last_quarter],
'This year': [start_of_year, end_of_year],
},
locale: {
direction: 'ltr',
format: 'dd-mm-yyyy',
separator: ' → ',
applyLabel: 'APPLY',
cancelLabel: 'Cancel',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: 1,
autoApply: true,
},
const mongoconection =url;
const agenda = new Agenda({
db: {
address: mongoconection,
collection: "agendajobs",
option: { useUnifiedTopology: true }
}
});
new Promise(resolve=> agenda.once('ready', resolve));
agenda.define("say hello", job => {
console.log('hello');
});
(async function() {
await agenda.start();
await agenda.schedule(4/2/2020, 'say hello');
//repeat every
})();
how can I pass the dynamic date to the agenda?``
it's falling if I give in this formate 4/2/2020
If I give 5 minutes or even once a week if working
can anyone help me how to give time and specified date
Since schedule(when, name, [data]) as per the documentation
[s]chedules a job to run name once at a given time. when can be a Date or a String such as tomorrow at 5pm.
You need to provide a Date object instead of String.
The way to do it as per Date MDN documentation is new Date(2020, 1, 4) (assuming you meant February and not April) so your line could be:
agenda.schedule(new Date(2020, 1, 4), 'say hello');
I'm importing data from a Sybase database into ChartJS in VueJs2. I'm using the vue-chart module
I push the timestamps into an array as Unix times using
this.firstIn(new Date(tnaDetails[0].Sunday_FirstIn).getTime())
So:
[Sunday_FirstIn:2010-01-17 08:00:00.0]
Would convert to
1263708000000
Which I then add to the dataset:
datasets: [{
type: 'line',
label: "First In",
backgroundColor: "green",
data: this.firstIn,
fill: false
}
]
However, when the data is plotted on the graph, the values are changed. The above Unit Timestamp becomes
1263700000000
Which obviously returns the wrong time. I'm not doing anything to the ticks in the options.
Below is a result of the numbers being changed. The console has the original data:
Is there a setting that alters the precision/values of numbers in ChartJS that I'm not aware of?
Thanks.
Seth
For anyone who has any similar problem in future, I patched together a few solutions I found.
Firstly, from here Unix Timestamp in JavaScript, I wrote the method:
getTimeString: function(dateString) {
var hours = new Date(dateString).getHours();
var mins = new Date(dateString).getMinutes();
return Math.round((new Date("1970-02-01 " + hours + ":" + mins)).getTime());
}
The important part here is to make sure you have the same day. Not doing this will cause the ChartJS graph to plot the times in different places on the y-axis, even if the hours are the same.
Then from this StackOverFlow question and the related plunker, in the chart options, I have:
{
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
position: 'left',
ticks: {
callback: value => {
let date = moment(value);
if (date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
return null;
}
return date.format('H:mm');
},
stepSize: 3.6e+6
}
}]
}, //end scales
tooltips: {
callbacks: {
label: function(toolTipItem, data) {
let date = moment(toolTipItem.yLabel);
if (date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
return null;
}
return date.format('H:mm');
}
}
}
}
Pay attention to the callbacks. They will format the time, calculating the difference from a set time to the time you need plotted. In the first function, you could really use any day, it wouldn't matter, as long as it's the same day. The stepSize will display hourly intervals on the yAxis.
I have the following date picker
{
xtype: 'datefield',
id: 'FinalDespatchDate',
name: 'FinalDespatchDate',
fieldLabel: 'Part Despatch Date',
labelWidth: 150,
width: 370,
validateOnChange: false,
format: 'd/m/Y'
},
In my model i have
{
mapping:'FinalDespatchDate',
name:'FinalDespatchDate',
type: 'date',
dateFormat:'d/m/Y'
},
if in my model i don't include the dateFormat. The date binds to my date picker but it sends the date in an incorrect format. When i add dateFormat it sends the date in the correct format it just no longer binds to the datepicker. ie the above configuration display nothing in the date picker
Does your data come from server with properly formatted date value ('d/m/Y') in this (non-working) configuration?