Is it possible to prevent previousButton in 'Ext.calendar.panel.Panel' from showing dates earlier than today?
In addition, views config allows selecting firstDayOfWeek, where 1 equals Monday:
views: {
week: {
firstDayOfWeek: 1
}
}
But, is it possible to configure week view to start always from today?
Looks like the min date is not implemented in the calendar.
To start week from today, you can use the following code:
views: {
week: {
firstDayOfWeek: (new Date()).getDay()
}
},
This is update of my question upon the answer from #Arthur Rubens:
Let's say that for the sake of generalization, instead of (new Date()).getDay(), some more complex function is needed to be calculated (for example factorial of that number times that number to the power of five, and then mod 7). Obviously, some method must be written, like:
initComponent: function () {
this.firstDayOfWeek = this.getTheResult(); // <- this is not defined
this.callParent(arguments);
},
getTheResult: function () {
// some calculation...
return result;
}
However, that raises two problems:
1) this.firstDayOfWeek is not properly defined since firstDayOfWeek is not property of class, but it is within
views: {
week: {
firstDayOfWeek:
}
},
So, how to address properly that specific property? In other words, can be this property associated with some method (in this case getTheResult)?
2) I don't know for what reason, but initComponent simply doesn't work with calendar class.
Related
I have a typescript/angular application where a user can enter specific times during a day. Please see the image below to get a better understanding. I am having trouble figuring out the logic to be able to loop through all the times for every day and record any overlapping times. The times are stored in json format.
There is a lot of code but basically the code to push the times to the json is:
private pushTime(dayName : string, time : string[]) : number {
return this.dealEditDaypartingCtrl.deal.deal_settings.dayparting.schedule[dayName].push(time);
}
In the code above 'time' is an array e.g. ["03:45", "13:00"]
The array is stored in json format like this:
schedule:{
"Monday":[ ["04:00", "12:00"]],
"Tuesday":[ ["05:00", "15:15"]],
"Wednesday":[ ["04:00", "13:00"]],
"Thursday":[ ["07:00", "13:00"]],
"Friday":[ ["03:45", "13:00"]],
"Saturday":[ ["05:30", "16:30"]],
"Sunday":[ ["07:00", "14:00]],
"Week":[[]]
}
So for this example for week, it should be "Week":[["08:00", "12:00]], as 8-12 is the only common time shared across all days
Example times across days of the week
You need to loop through all of them and compare to see if there're overlaps.
You can loop through your schedule like:
lookForOverlapsInSchedule(schedule: any): any[] {
let days: string[] = Object.getOwnPropertyNames(schedule); // get object propery names in array like ['Monday', 'Tuesday', 'Wednesday', ...]
days.forEach(
(dayOne) => {
let overlapsCounter: number = 0;
days.forEach(
(dayTwo) => {
if (compareDayTimes(schedule[dayOne], schedule[dayTwo]) {
overlapsCounter++;
}
}
);
if (overlapsCounter == 7) {
// you found an overlap
}
}
)
}
compareDayTimes(dayOne: any, dayTwo: any): boolean {
// compare dayOne and dayTwo for overlaps
// return true if they overlap, false if they don't
}
This is just a pointer in the right direction, the code won't work on it's own but might give you an idea on how to implement your own solution.
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.
I feel like I am missing something basic here, and would love some help.
I have some data that looks like this
"playerPoints"{
"ted":{"military":3,"gold":2},
"bill":{"military":2,"gold":4}
}
And an ng-repeat that is player in playerPoints and it shows a list of each players points. But I want a total at the end of each list. That adds up all of that specific players points. In this instance ted would have 5 and bill would have 6.
I have looked around and haven't really come across something that seems like it would work, but this is where the missing basic info could come into play.
Any assistance would be grand.
You need a function in your controller or service that does this in advance. Something like this untested example:
myService.data = {
"playerPoints": {
"ted": {
"military": 3,
"gold": 2
},
"bill": {
"military": 2,
"gold": 4
}
}
};
function sum(obj) {
var sum = 0;
for (var el in obj) {
if (obj.hasOwnProperty(el)) {
sum += parseFloat(obj[el]);
}
}
obj[el]["total"] = sum;
}
sum(myService.data.playerPoints);
In your controller you'll assign a variable to the service property:
ctrl.playerData = myService.data;
Then in your view you can simply output that key's value:
<div ng-repeat="player in ctrl.playerData">
<span>{{player.total}}</span>
...
</div>
If done properly in a service and stored as a property of the service the view will be automatically data-bound and will update dynamically if the object's data changes.
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 a store containing a few records. And I want two buttons, one for up one record (unless first record) and one for down one record (unless last record).
I hoped that .next() and .prev() would work as they're part of the AbstractElement, but they didn't. I basically just need to select the next or the previous records based on what record I'm currently on.
This is the code I have so far (for upping the priority only, the other one would be very similar):
Controller
stores: [
'Ratings'
],
...
refs: [
{
ref: 'RatingCombo',
selector: '#comboRating'
}
],
...
onPriorityUpClick: function(button, e, eOpts) {
var me = this,
current_rating = me.getRatingCombo(),
s = me.getRatingsStore(),
r = s.findRecord('id', current_rating.getValue()),
first_r = s.first();
// If top rating, do nothing
if(r !== first_r) {
var prev_r = r.prev();
// Set new rating
...
}
},
...
As you can see I already have the "is first" part under control. Just need a way to get the previous record. If anyone has any ideas, it would be greatly appreciated.
IIRC Sencha itself used the following code to get the next/previous record:
idx = store.indexOf(record),
nextRecord = store.getAt(idx+1),
prevRecord = store.getAt(idx-1)