I'm using a calendar from http://w3widgets.com/responsive-calendar/.
I´d like to get the date on event onMonthChange.
But the year, month and day are always undefined.
The documentation of the plugin is well made but doesnt explains how to do it by example.
Here is my event:
onMonthChange: function(events) {
var $year=$(this).data('year'); //here I get undefined
var $month=$(this).data('month');//here I get undefined
var $day=1; //but I´d like to get the day of the current date after changed
},
if I use this event from documentation always works well:
onDayClick: function(events) {
var thisDayEvent, key;
key = $(this).data('year')+'-'+addLeadingZero( $(this).data('month') )+'-'+addLeadingZero( $(this).data('day') );
}
The documentation your are showing applies to day events.
When using onMonthChange, there is no event argument, and in order to access the object, use $(this)[0]. That gives you access to the new selected Month through the properties currentMonth and currentYear (see code):
$(".responsive-calendar").responsiveCalendar({ onMonthChange: function() {
alert(($(this)[0].currentMonth + 1) + '/' + $(this)[0].currentYear );
} });
Please note that this uses the javascript getMonth(), so the months will be 0-11.
Related
For example is it possible to call a function after 2 weeks?
I thought about react and a library like dayjs and some code like this:
const date = Number(dayjs(new Date()).format("DD"))
if (date === date + 14) {
//function
}
I testet it with seconds and realised that i am dumb because everytime i refresh the page it will restart the "timer". Do you have any ideas if it is possible?
As suggested in the comments, you could make a cookie/session storage item containing the date at which you want this to take place. Here is an example using session storage, though a cookie is more preferable:
const nowInTwoWeeks = new Date(Date.now()) // Today's date
nowInTwoWeeks.setDate(nowInTwoWeeks.getDate() + 14) // Add 14 days
sessionStorage.setItem('twoWeeksMark', nowInTwoWeeks)
const now = new Date(Date.now()) // Today's date to use for comparison
if (now >= sessionStorage.getItem('twoWeeksMark')) {
// Do the work
}
I'm trying to highlight the current week in my grid row, get NaN for currentWeek and jsonWeek:
if (this.props.data.startDate) {
var jsonWeek = moment(this.props.data.startDate, "MM-DD-YYYY").week();
var now = moment();
var currentWeek = now.week();
if (currentWeek == jsonWeek) {
styles = {
backgroundColor: 'yellow'
};
}
}
Any ideas?
Your issue made me correct mine too...fixed the NaN this way..
did you change the locale like this?
moment.locale('en',
{
week: {
dow: 1 // Monday is the first day of the week
}
});
that`s the reason to me, because this will add a week object to internal function localeData().
I removed the locale customization and changed all
.startOf('week')
to
startOf('isoweek')
to get the mondays working and the week will work as well
I don't see anything wrong with your code. It's probably a problem with your moment dependency. Check that the version is > 2. It looks like week was added in 2.0.0.
I have this filter for moment:
function momentFilter() {
return function(input, format) {
if (!input) return null;
if (format == 'fromNow') {
var fn = moment(input).fromNow();
console.log('fromNow called with: ' + input + ' giving result: ' + fn);
return fn;
}
};
}
And I have this html:
<div>{{timestamp | moment: 'fromNow'}}</div>
I see the filter getting called on the digest cycle, and the relative time that gets logged in the console looks great. I.E. it goes from 1 minute ago, 2 minutes ago, etc... However the UI never updates to what the filter returns.
The first call is reflected on the UI, but after that the UI never updates.
What am I doing wrong?
EDIT:
That html is inside an ng-repeat that tracks by id. I am assuming that because nothing in the object actually changed (current time just moved), that angular never detects anything for that object.
Still not sure how to work around this.
did you try by changing object hash? normally if you change object hash code framework will understand object is modified and rendered updated object.
Filters are assumed to be idempotent, that is the same input always leads to the same output. Since timestamp doesn't change there's no reason for Angular to do anything.
If your filter is stateful and the output can change with every call then you have to mark it accordingly.
function momentFilter() {
function filter(input, format) {
if (!input) return null;
if (format == 'fromNow') {
var fn = moment(input).fromNow();
console.log('fromNow called with: ' + input + ' giving result: ' + fn);
return fn;
}
};
filter.$stateful = true;
return filter;
}
I have a class which contains date among many other attributes:
Class example {
Date lastUpdate;
}
So everytime there is change I update the lastUpdate by
lastUpdate = new Date();
to get the new time stamp. In the database it gets updated correctly as 02-OCT-14 12.20.35.559000000 PM. However when I try to display it on the UI using angular JS by calling example.lastUpdate it only displays 10/02/2014 12:20:35. I need to know whether it was AM or PM how do I add that ?
you can create and use Angular your own angular filter for this, let's call it AMPMDateFormat and you can use this way {{ example.lastUpdate | AMPMDateFormat }} to display de AM or PM value next the current displayed value.
var app = angular.module('your-app', []);
app.filter("AMPMDateFormat", function () {
return function(input) {
//here you can use [Moment.js][1]
return moment(input).format();
//or you can parse the input value by yourself
//something like this
var parts = input.split(' ');
var datePart = parts[0];
var timeParts = parts[1].split(':');
var hours = parseInt(timeParts[0]);
var meridian = (hours < 12) ? "AM" : "PM";
if (hours == 0) hours = 12;
if (hours > 12) hours -= 12;
return datePart + ", " + hours + ":" + timeParts[1] + " " + meridian;
}
});
Hope this helps.
!Important. Please, in the code all depends on the format of the input value. I'm assuming that the input format will always be "dd/MM/yyyy hh:mm:ss" just like you said that is the way that it's currently displayed. If the format is other this code doesn't works! But the idea still working.
Angularjs allows you to format your date in the UI. See this documentation for more information.
Therefore, you don't really need a function to do this. You could format this in your HTML.
Example Controller snippet:
angular
.module("myApp")
.controller('MyController',
[ '$scope', function($scope) {
$scope.myDate = new Date();
}]
);
Example UI snippet:
<p>{{myDate | date:'yyyy-MM-dd HH:mm:ss a'}}</p>
In the above, myDate is a Date in the Controller that will display in the HTML in the format given. The a portion is the AM/PM marker. Thus, the value would, for example, look like this: 2014-10-07 10:10:02 AM.
Just to give you a little background on my question:
I am creating a form in Google App Script using the UI Services and I am storing specific calendar events in a dataArray. So the event object is stored in the array. I want to pass this array to the submit function but can't figure out how to go about this because :
I can't add it as a callback element (because it isn't a widget)
I can't store the event object in a widget (i.e. a listbox, etc) and then add that widget as a callback element.
Here is a brief sample of what I am trying to do:
var cal= CalendarApp.getDefaultCalendar();
var event= cal.getEvents(new Date("June 16, 2013 PST"),
new Date("July 22, 2013 PST"));
var specific = new Array;
for( var j=0; j<event.length;j++){
specific.push(event[j]);
//This stores the events in the specific variable
//I want to send this variable (w/ the data) to another function on submit
I would appreciate any suggestions you can lend me.
Thanks!
As a complement to the answer I gave in the comments : "you could also simply store the id and while you read the events again using the same start/end time you can check if an event correspond to the saved ID in a loop... if a match is found with the right ID you are sure it's the right event"
Here is a piece of code I use to modify/update/delete calendar events using their ID as reference. This code is used to delete specific events selected from the spreadsheet, the code to modify events is roughly the same, at least it uses the same ID checking.
...
var cal = CalendarApp.openByName(calName);
if (cal) {
var events = cal.getEvents(new Date(date_deb), new Date(date_fin),{max: 4000}); // stocke tt ds une variable array
var sel= sh.getRange(6,1,sh.getLastRow()-5, 10).getValues();// read data in the SS
for(e=0;e<events.length;++e){
var delFlag = false;
var ID = events[e].getId();
for(n=0;n<sel.length;++n){
if ((sel[n][8] == "x"||sel[n][8] == "X")&&sel[n][9]==ID){ // the ID here is stored in the spreadsheet in column J and I use a 'X' marker to select which event should be deleted
delFlag = true;
sh.getRange(n+6,9,1,2).setBackgroundColor('#ff5500');
SpreadsheetApp.flush();
Logger.log('FLAG '+ e);
break;
}
}
if(delFlag){
try{
var toDelete = events[e].deleteEvent();
++todel;
delFlag = false;
Logger.log('event deleted : '+sel[n][1]);
}catch(Err){Logger.log('Event from a serie already deleted from another occurence')}
}
}
}
var msg = todel + " événement(s) effacé(s) dans l'Agenda '"+calName+"'";
ss.toast("Effacement terminé", msg, 3);
...