We Keep Coding

How can I dynamically insert dates in dncalendar?

I've got a problem using dncalendar, hope someone will help me!
I need a simple calendar in which being able to save and recover data from a db. dncalendar seemed good, but I have now problem in dynamically insert data into it.
I post some code for clarification. I recover the dates from some input fields called .date-smart and build an array (data_note). Problem is when I want to dynamically insert this dates into object notes, without knowing how many dates I have. If I do it like in below code, everything works fine, but I do not know how to do it with a for cycle or similar. Can someone help me?
var data_note =[];
var note = [];
$(".date-smart").each(function(){
data_note.push($(this).val())
note.push("SW");
})
var my_calendar = $("#dncalendar-container").dnCalendar({
dataTitles: { defaultDate: 'default', today : 'Today' },
startWeek:'monday',
});
my_calendar.build();
my_calendar.update({
notes: [{'date': data_note[0], 'note':note[0]}, {'date': data_note[1], 'note':note[1]}];
})

Why don't just make a variable feed all data in it and then pass it to notes
Like
var data_note =[];
var note = [];
var notesArr = [];
$(".date-smart").each(function(){
data_note.push($(this).val())
note.push("SW");
notesArr.push({'date': $(this).val(), 'note': 'SW'});
})
var my_calendar = $("#dncalendar-container").dnCalendar({
dataTitles: { defaultDate: 'default', today : 'Today' },
startWeek:'monday',
});
my_calendar.build();
my_calendar.update({
notes: notesArr
})

Change the date labels as Day with numbers in full calendar

I am working with FullCalendar V4 along with Ionic -4 and Angular-8 . In week view it shows me 7 days. I want every day to be displayed as Day with number. For example instead of Monday it should be displaying Day 1.
Also
I am planning to display only three weeks so there should be Day
label starting with Day 1, Day 2 , Day 3 and all the way to display
Day 21
Is there a inbuilt method to do this. Or any other approach to do so. Thanks in advance :)
Current Implementation
columnHeaderText(info){
if(info){
return 'Day ' + this.count++
}
}
<ion-content>
<full-calendar #calendar
[header]="header"
[defaultView]="defaultView"
[plugins]="calendarPlugins"
[editable]="editable"
[events]="events"
[eventStartEditable]="eventStartEditable"
[eventDurationEditable]="eventDurationEditable"
[dragRevertDuration]="dragRevertDuration"
[droppable]="droppable"
(columnHeaderText)=" columnHeaderText($event)"
(eventRender)="eventRender($event)"
></full-calendar>

Maybe you can try something like this? and reset 'count' everytime you change to a new 3 week period
var count = 1;
var calendar = new Calendar(calendarEl, {
//your settings...
columnHeaderText: (date) => {
return 'Day ' + count++},
}
}
EDIT
calendarOptions: any;
dayCount: number = 1;
ngOnInit() {
this.calendarOptions = {
columnHeaderText: () => {
return 'Day ' + this.dayCount++
}
}
and change in your html to:
[columnHeaderText]="calendarOptions.columnHeaderText"
}

Vue js data logic - booking table

I need to make a table of bookings (the hours are the y, the slots (actually tennis courts) the x).
I will populate an array from my database with the already occupied
slots (court 5 at 5PM,...);
I'll then loop trough all possibilities (from 7AM to 12PM and for
each hour, every slots) and put the booking's name when taken, and
put a button when it's not.
I can't figure out how to structurate my data;
In Php I had an array like $bookings[$hour][$court] which, when not empty, should contain the booking name (in the php nested loops (hours and courts), I checked if $bookings[$hour][$court] was empty (and then display the content if any or a button otherwise).
I hope I'm clear enough...
Thank you all !
EDIT:
I tried that way:
new Vue({
el: '#app',
data: {
bookings: [
{
hour: '1',
court: '3',
name: 'Laurent'
},
{
hour: '2',
court: '2',
name: 'Gaspard'
}
]
}
})
And
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<tr v-for="hour in (7, 24)" :key="hour">
<td v-for="court in (1,6)" :key="court">
<div v-if="">
</div>
</td>
</tr>
</table>
</div>
But I don't kow how to link the data to the template...

You could create a method that filters the bookings by the court and hour indexes in your loop.
methods: {
getBookings( hour, court ) {
return this.bookings.filter( booking => booking.hour == hour && booking.court == court );
},
},
This returns an array of appointments so I'd use v-for instead of v-if. This means less code in the js, you don't have special code to handle the case where the returned array is empty, and your code will show if you have double bookings.
<div v-for="booking in getBookings( hour, court )" >
{{ booking.name }}
</div>

jQuery redirection issue, need to redirect on page with a specific datepicker result

I have a jQuery function which redirect to "/schedule" page after adding the task , but I want to redirect that page to a specific date result(TaskDate:
$("#datepicker").data('datepicker').getFormattedDate('yyyy-mm-dd')).
function addTask() {
$.post("/add-task",
{
ProjectID: $("#project").val(),
TaskDate: $("#datepicker").data('datepicker').getFormattedDate('yyyy-mm-dd'),
Workers: $("#workers").val(),
Equipment: $("#equipment").val(),
Material: $("#material").val(),
Notes: $("#notes").val()
}, function (res) {
if (res == 1) {
window.location.href = '/schedule';
} else {
$("#error").show();
}
});
}
If we add the task for 15 December it should shows the list from 15 December to upcoming week . but now it comeback to current week which is "/schedule" page

You have to pass desired data as querystring to next page and retrieve it using a server side language (e.g. $_SERVER['QUERY_STRING'] in php) or using pure jquery (this link)
to atatch query string to url just use this:
window.location.href = '/schedule/?TaskDate=' + TaskDate;

It solved by assigning the selected date value to current date

Add class in angular on ng-repeat when item is contained on array

On an Angular controller I have an array of events:
vm.events = [
{ date: "18-02-2016", name: "event A" },
{ date: "18-02-2016", name: "event C" },
{ date: "24-02-2016", name: "event D" }
];
And I have an array of all days in current month:
var days = [
{ date: "01-02-2016" },
{ date: "02-02-2016" },
{ date: "03-02-2016" }
...
];
On my angular view I have the following:
<span
class="day"
ng-class="{ 'today': isToday(day) }"
ng-repeat="day in vm.days">{{getDay(day)}}</span>
How can I add a class to the span when a day has events, e.g., when the day has at least one record in vm.events?

Here is your solution:
<div ng-repeat="day in days">
<span ng-class="{true:'today', false: 'day' } [isToday(day.date)]">
{{day.date}} : {{isToday(day.date)}}
</span>
</div>
Check the working plunker

You can use ngClass, the way to do is by adding your condition like:
ng-class="{true:'today'}[isToday(day)]"

The first thought might be to write some function that takes a date and then and it determines if that dates has any events by iterating over the events array.
That will result in a lot of unnecessary iteration on each digest cycle. Instead, you can manipulate the data before it's rendered in the ng-repeat. Modify the data such that each day has an array of events. Now you can just check if that day's events array contains any events.
Ideally, I would try and change this on the server, so that data came down in such a fashion. But there's no reason the client can't do it. Here's a simple implementation:
angular.forEach(vm.days, function(day) {
// this modifies the day objects in vm.days, if you didn't want to
// do that you could copy them and produce a separate array of days
// with events...
day.events = vm.findEventsFor(day))
});
vm.findEventsFor(day) {
var events = [];
angular.forEach(vm.events, function(event) {
if (event.date === day.date) {
events.push(event);
}
}
return events;
}
Your ng-class might look like this:
ng-class="{today: isToday(day), hasEvents: day.events.length > 0}"