I am working on creating my very own custom Calendar.
Take a look at the full example of my component here
I need help figuring out how to combine week divs that share the same value {{day.weekNumber}} so that there is only one div for each shared value, rather than multiple as shown in the example below.
In your situation, it is recommended to use a separate array specifically for storing week numbers.
Typescript
public weekNumbers: number[] = [];
public rowWidth: any = 100 + '%';
ngOnInit() {
...
... // existing code goes here
...
let weeks = [];
for (let i = 1; i <= this.numberOfDaysCurrentMonth; i++) {
this.daysToDisplayInCurrentMonth[i - 1] = new Date(this.currentYear, this.currentMonth - 1, i).getDay();
const day = {
number: i,
weekDay: new Date(this.currentYear, this.currentMonth - 1, i).getDay(),
name: this.dayNames[this.daysToDisplayInCurrentMonth[i - 1]],
weekNumber: this.getWeekNumber(new Date(this.currentYear, this.currentMonth - 1, i))
};
weeks.push(day.weekNumber);
this.days.push(day);
}
this.weekNumbers = [];
weeks.forEach((ele) => {
if(this.weekNumbers.indexOf(ele) < 0) {
this.weekNumbers.push(ele);
}
});
this.rowWidth = (100/this.weekNumbers.length) + '%';
}
HTML
<div class="row-calendar">
<div class="week-number" [style.width]="rowWidth" *ngFor="let week of weekNumbers">
<label class="number-label"><span>{{week}} </span></label>
</div>
</div>
Within my web application, there are several pages that handle submitted data from forms. I would like to prevent the following scenario: A user creates a form on the client side with identical fields to my original form and sends it to the URL responsibl ...
I'm facing some challenges while integrating ag-grid into my Angular application. Although I can successfully load data onto the grid, I encounter a problem where there are no scroll bars present after loading my dataset. Furthermore, attempting keyb ...
I am working on a project that involves fetching JSON API data and displaying it in an HTML table, but only for values above 10. Below is the code snippet along with my JavaScript. I specifically want to exclude negative values and only display positive v ...
Check out my HTML code: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <style type= ...
Is there a way to remove the background color on hover and replace it with a different color? .drp-policydetails { border: 1px solid #dddddd; background-color: #ffffff; } <div className="form-group"> <select className="form-control drp-po ...
Struggling to incorporate an image into a text within an h1 tag. Here's what I've attempted: <div class="image_clip"> <h1> MY WONDERFUL TEXT </h1> </div> In the CSS file: .image_clip{ background: url(../images/defa ...
I'm currently working on a webpage where I want to add a list of links that resemble tabs. While this style is functioning correctly for the main pages, I'm having trouble implementing it for a new section. The existing list is located within: ...
How can I create a toggle effect for the left border of an iron-list entry in Polymer when clicking on it? I found some jQuery code that adds the border to the first entry clicked, but I need help extending this functionality to apply to all list entries ...
Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...
I've been working on restyling a Select box and I want to add a CSS arrow that rotates as the Select box expands. However, I'm struggling to align the arrow properly with the Select box. I've tried using code from the internet, but it hasn&a ...
My current setup involves an Angular Reactive Form with various controls: this.taskForm = this.formBuilder.group({ storyNumber: new FormControl('', [Validators.required, Validators.pattern('^[A-Z]{2,}[0-9]*-[0-9]{2,}$')]), ...
My challenge is to extract the values of dynamically changing checked checkBoxes on my webpage. For example: while ($row=myqli_fetch_array($result)){ echo"<div>"; echo"<select id=\"course\" onchange=getCheckBox()> <opt ...
I'm facing an issue with two CSS classes - container and top_menu. The top_menu should not have a margin on top when used within the container class, but it somehow does. Removing the container div resolves this. How can I resolve this problem? Below ...
How can I incorporate background images in nested divs? <div id="templatemo_content" style="padding: 30px 30px 0 0; background: #fff url(images/foot_bg.png) no-repeat 0 bottom; z-index:10"> This particular div displays a grey-colored background imag ...
How can I access the data in the $event and verify if the treeClick method is being called upon click? When running the test file, I encountered the following error: "Expected spy treeClick to have been called once. It was called 0 times." In t ...
I'm struggling to get the Action Box displayed as an upper layer. I've already tried using z-index but it doesn't seem to make any difference. https://i.stack.imgur.com/rJ1vL.png $(document).ready(function () { ...
My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...
For my project, I need to loop through 12 items and separate them into different divs. Specifically, I want to group 0 and 1 together in one div, have 2 in its own div, 3 and 4 in another div, 5 in a separate div, and so on. <!-- Grouping 0 and 1 --> ...
My HTML content consists of two columns, with the first column being a sidebar that should have limited content. The second column holds the main content and can span several pages. The desired functionality is for the first column to scroll until the end ...
For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...