Breaking News: Grepper is joining You.com. Read the official announcement!

calendar with issue count in html css

Nanu answered on October 19, 2023 Popularity 1/10 Helpfulness 8/10

answer calendar with issue count in html css

calendar with issue count in html css

Comment

 <div class="col-sm-6">
            <div class="calendar">
                <button class="monthClass" mat-flat-button [color]="'primary'"  (click)="prevMonth()">&nbsp;Previous Month&nbsp;</button>&nbsp;&nbsp;
                <button class="monthClass"  mat-flat-button [color]="'primary'" (click)="nextMonth()">&nbsp;Next Month&nbsp;</button>
                <div class="month">{{ currentMonth }}</div>
                <div class="days">
                    <div class="day" *ngFor="let day of days">{{ day }}</div>
                </div>
                <div class="calendar-grid">
                    <div class="box" *ngFor="let box of boxes">
                        <div class="date">{{ box.date }}</div>
                        <div class="issue-count"> Issues: {{ box.issueCount }}</div>
                    </div>
                </div>
            </div>
        </div>

.calendar {
  text-align: center;
  padding: 20px;
}

.month {
  font-size: 24px;
  margin-bottom: 10px;
}

.days {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  background-color: silver;
}

.day {
  flex: 1;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  // gap: 10px;
}

.monthClass:hover {
  cursor: pointer;
  background-color: red;
}

.box {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  // padding: 10px;
  text-align: center;
  // min-height: 100px;
}

.date {
  // font-size: 18px;
  font-weight: bold;
}

.issue-count {
  // margin-top: 10px;
  // font-size: 14px;
  color: #007bff;
  /* Adjust the color as needed */
}

Popularity 1/10 Helpfulness 8/10 Language css

Source: Grepper

Tags: calendar count css html

Link to this answer
Share Copy Link

Contributed on Oct 19 2023

Nanu

0 Answers Avg Quality 2/10

calendar with issue count in html css

Contents

More Related Answers

calendar with issue count in html css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.