I´m developing Full Calendar like this, but instead of creating events I just get it from the database.
So now I developing Backend to receive days of the week of an event like this:
As you can see I receive booleans within days of the week
Now I want to restrict if one of this days come false, calendar doesn´t allow me to do that
JS Function:
function isGreaterThanToday(date) {
return date < hoy ? false : true;
}
function updateAssignedEvent(event, delta, revertFunc) {
if (!isGreaterThanToday(event.start)) {
mostrarError("Cant post an event today or before today.");
revertFunc();
return;
}
event.start = $.fullCalendar.moment(moment($.fullCalendar.moment(event.start.format())._i));
event.end = event.end ? $.fullCalendar.moment(moment($.fullCalendar.moment(event.end.format())._i)) : event.start;
event.color = getTareaCalendarioColor(event.tipoResponsable,
event.estatusTarea,
event.start,
event.end.diff(event.start, 'hours') <= 24 ? event.start : event.end);
updateEvent(event).then(function(data) {
if (!data.success) {
revertFunc();
return;
}
event.end = event.end !== event.start ? event.end.add(1, 'day') : event.end;
$calendar.fullCalendar('updateEvent', event);
}, function(error) {
revertFunc();
});
}
As you can see I have a function calledfunction isGreaterThanToday(date), I use it to restrict post an event today or before today. I want to do something like this, but I don´t have an idea of how can I call these booleans and compare for example Sunday of the calendar with Sunday of boolean receive. Can anyone help me there? Regards
For example into my function I add:
if (event.accion.agendarDomingo != true) {
mostrarError("Sunday is not allowed");
revertFunc();
return;
}
But how can I compare with my event.start and event.end DAY?
To get day of week using moment.js use 'e' as a format. result will be 0..6 Monday to Sunday.
event.start.format('e');
To check if the time is passed use isAfter function:
If nothing is passed to moment#isAfter, it will default to the current time.
moment(event.start).isAfter();
Now these two validation constraints combined would look like this:
function isDateValid(date) {
return date.format('e') !== "6" && moment(date).isAfter();
}
Related
I am using FullCalendar, if a user clicks a + more, I wanted it to expand all events in the calendar so... I used eventLimitClick method like below. But if I click +more in the last month (April), it goes into May (current month), and if I go back to April, I can see those expanded events in calendar.
var eventLimitClick = function (info) {
var eventExpandable = _.get(scope.options, 'expandEvents');
if (eventExpandable && config.views.month.eventLimit < info.segs.length) {
scope.expanded = true;
calendar.fullCalendar('destroy');
onload(info.segs.length);
}
};
var onload = function (limit) {
$q.all({
events: controller.getAllEvents(),
resourceList: controller.getResourceList()
}).then(function (data) {
config.views.month.eventLimit = limit;
config.events = data.events;
config.resources = _.sortBy(data.resourceList, 'title');
calendar.fullCalendar(config);
calendarService.config.set(config);
});
};
Of course, I do not want it go to current month, is there any way to make it stay in April with expanded events? I searched relevant information but I can't find it, does anyone have some information about it?
The documentation is not enough to understand nor there is any example to understand. Why & how to use dateSetAction() and dismissedAction() methods in DatePickerAndroid?
These are basically internal getter functions/methods that are called internally to determine whether the date has been selected or not. These two methods are defined in the DatePickerAndroid class as:
static get dateSetAction() {
return 'dateSetAction';
}
static get dismissedAction() {
return 'dismissedAction';
}
You can visit this page to populate yourself about these methods.
Simple explanation:
dateSetAction is a type of action that tells you the date has been selected in the datepicker.
dismissedAction is also another type of action that tells you the datepicker dialog has been dismissed/closed.
Example:
async openAndroidDatePicker() {
try {
const {action, year, month, day} = await DatePickerAndroid.open({
date: new Date(2020, 4, 25)
});
if (action === DatePickerAndroid.dismissedAction) {
console.log('Date picker has been dismissed/closed');
} else if (action === DatePickerAndroid.dateSetAction) {
console.log('Date has been selected');
}
} catch ({code, message}) {
console.warn('Cannot open date picker', message);
}
}
If the user picked a date, Object containing action, year, month (0-11), day. If the user dismissed the dialog, the Promise will still be resolved with the action being DatePickerAndroid.dismissedAction and all the other keys being undefined. Always check whether the action before reading the values.
async openAndroidDatePicker() {
try {
const {action, year, month, day} = await DatePickerAndroid.open({
// Use `new Date()` for current date.
// May 25 2020. Month 0 is January.
date: new Date(2020, 4, 25)
});
if (action !== DatePickerAndroid.dismissedAction) {
// Selected year, month (0-11), day
}
} catch ({code, message}) {
console.warn('Cannot open date picker', message);
}
}
I'm trying to retrieve the created_at time
but instead it renders the current time. which is not what i want.
I'm using laravel 5.5 in conjunction with moment.js
<p> <% post.created_at | phpDate : "human" %></p>
main.js
app.filter('phpDate', function() {
// A filter declaration should return an anonymous function.
// The first argument is the input passed to the filter
// Any additional arguments are paramaters passed AFTER the filter name
return function(input, format) {
// Create an instance of Moment. Use both the
// date value and timezone information PHP sent
var date = moment.tz(input.date, input.timezone);
if (format == "human") {
// Special case for formatting. If user asks for "human" format
// return a value like "13 minutes ago" or "2 weeks ago" etc.
return moment().subtract(1, 'days').calendar();
} else {
// Covert the moment to a string using the passed format
// If nothing is passed, uses default JavaScript date format
return moment().format('lll');
}
};
});
with the help of a highly respectable user on this site we were able to fix it, just needed add input within moment parathesis.
app.filter('phpDate', function() {
return function(input, format) {
if (format == "human") {
// add input then it works
return moment(input).subtract(1, 'days').calendar();
} else {
return moment().format('lll');
}
};
});
I'using this library for react time picker: https://github.com/YouCanBookMe/react-datetime
But now I have 2 problems.
The time (Am, Pm, HH:mm) in timepicker doesnt'work , because it doesn't change, it remain to 12 : 00 AM
How correctly update state? because if I handle onChange (input manual write), it receive string, that I can't parse and it is invalid date.
My code is:
import DateTime from 'react-datetime';
var moment = require('moment');
handleChangeDate(propertyName, date) {
const event = Object.assign({}, this.state.event);
if (typeof date === 'string') {
date = moment(date);
}
event[propertyName] = data.format('DD/MM/YYYY HH:mm');
this.setState({ event: event });
}
and in Render() I have compoment:
<DateTime dateFormat={"dddd, MMM. Do YYYY, HH:mm (hh:mm a)"} value={this.state.event.to} onChange={this.handleChangeDate.bind(this, 'to')}/>
What is wrong?
check in below link.
Customized calendar will solve your problem.
https://github.com/YouCanBookMe/react-datetime#customize-the-appearance
After choose date in calendar then click on date. It will show the edit option for time.
Example Link
https://codepen.io/simeg/pen/YppLmO
Let it try
Users of our application have to choose the timezone they want to work in. This is because they might exclusively work for customers of some other timezone.
The dates of the aplication are then stored in UTC.
Javascript takes the timezone offset of the browser when displaying utc dates as local dates, which is not what I want.
For displaying dates I have a filter in place. It takes the offset that was applied because of the browser and removes it. Then the offset as defined by the user is applied. This works for displaying values.
A sample might be: The user sits in UTC+03:00 but his setting in the application is for UTC-4:00.
In the database there is a UTC value of 6am. The desired displayvalue is 6-4 = 2am. This is achieved by removing the offset applied because of his browser (-3) and then applying the offset of his settings.
function standardDateFilterInterceptor(date, format, timezone) {
if (timezone === "agent") {
if (date !== null && date !== undefined) {
var momentDate = moment(date.toString(), ["YYYY-MM-DD HH:mm:ss"]);
if (momentDate.isValid()) {
date = momentDate.toDate();
let offset = date.getTimezoneOffset();
if (offset !== null && offset !== undefined) {
offset = offset * 60000 * (-1);
const dateWithOffset = new Date(date.getTime() + offset);
date = dateWithOffset;
}
}
}
if (agentTimeZoneOffset !== null && !angular.isUndefined(agentTimeZoneOffset)) {
timezone = agentTimeZoneOffset;
}
}
return originalFilter.apply(this, [date, format, timezone]);
}
For displaying values this is working but I dont find a way to update values. The adjusted value (2am) in the sample would end up in the scope and overwrite the original value of 6am. I can see that when I change the value to 3 and then back to 2. Is there a way to handle this? Like controlling what gets set in the scope when a dom element changes.
I ended up with a directive that handles the case when the value in the view is updated
Directive
app.directive('tzAdapterTime', function () {
return {
require: 'ngModel',
link: function ($scope, $element, $attrs, modelCtrl) {
modelCtrl.$formatters.push(function (inputValue) {
var offset = moment(modelCtrl.$modelValue).parseZone().utcOffset();
return moment(modelCtrl.$modelValue).subtract(offset, 'minute').toDate();
});
modelCtrl.$parsers.push(function (inputValue) {
var offset = moment(inputValue).parseZone().utcOffset();
return moment(inputValue).add(offset, 'minute').toDate();
});
}
};
});
View
<input type="datetime-local" ng-model="article.publish" tz-adapter-time >