Highlight day and week in Calendar

Asked

Viewed 721 times

2

Like highlight (stylize) the day of the month and the week?

The function below was the simplest I could get on the Web that allows me to understand at least part of the code. I need to know 1) how to apply CSS to the current day and 2) access, alter and stylize the week).

The object Date() allows access to the year, month and day, but does not have a direct method that returns the week (series of days from Sunday to Saturday), so that I can refer to current week, previous or posterior, as is done in getDate() - 1, for example.

To the access and change the series of days of the desired week, want style it somehow (tag <tr>) in CSS to highlight, as in the image below. Ex: 15 to 21 July OR 29 July to 4 August.
1ª imagem

In addition, case the previous/subsequent week for part of last month/following, would have to display the two months, side by side, (as in the image below).
Ex: If today were November 3, as highlighted in the image below, a reference to last week would belong to the month of October (days 24 to 30), making the two months in question necessary in order to display the current day and the week before.

2ª imagem

Remarks:

To stylization of the week must be arbitration, spanning a single entire line (tag <tr>), as in the first image (days 15-21). By arbitration I mean to be able to pass a value to the function returning 1) current week, 2) last week, 3) week before, 4) next week, or 5) week after the following week (as well as getDate() - 1 returns yesterday), regardless of the current day (24, in the first image), which serves only for reference, with the aim of identify 1 of those 5 possibilities of weeks in the Calendar. Hence the need to sometimes include a second month (2nd image), due to the difference between present day and the desired week.

The main objective is to highlight the day of the month and the line <tr> of the desired week, whether or not this is accomplished by accessing the weeks the way I explained it.

<body>

<style>
.week {
outline: solid 1px red;
}
</style>

<div id='cal'></div>

<script type="text/javascript">
function Calendar(id, year, month) { 
  var elem = document.getElementById(id)
  var mon = month - 1
  var d = new Date(year, mon)
  var weekDay = ["Sun", "Mon", "Tues", "Wed", "Thu", "Fri", "Sat"];
  var months = ['January', 'Frebruary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var table = ['<table><tr>']

  table.push('<th colspan = 4>' + months[mon] + '</th>' + '<th colspan = 3>' + year + '</th>' + '</tr><tr>')
  for (var i = 0; i <= 6; i++ ) {
    table.push('<th>' + weekDay[i] + '</th>');
  }
  table.push('</tr><tr>')

  for (var i=0; i<d.getDay(); i++) {
    table.push('<td></td>')
  }
  while(d.getMonth() == mon) {
    table.push('<td>'+d.getDate()+'</td>')
    if (d.getDay() % 7 == 6) {
      table.push('</tr><tr>')
    }
    d.setDate(d.getDate()+1)  
  }
  for (var i=d.getDay(); i<7; i++) {
    table.push('<td></td>')
  }
  table.push('</tr></table>')
  elem.innerHTML = table.join('\n')
}
new Calendar("cal", 2015, 2);
</script>
</body>
javascript

  • You can paste images directly into the body of the question. Images in external links, tend to fall over time.

  • 1

    Could show what you’ve done?

  • @Eden, optionally you can use the Momentjs blibiotace to manipulate the date: http://momentjs.com. You can view the following jsPerf: https://jsperf.com/moment-js-native-date/4

1 answer

5

Get current day

In Javascript, to get the current day use the method getDate():

var hoje = new Date().getDate();

Get nominated week

To get the week indicated in Javascript, during the construction of table rows, we can check when opening a new <tr/> whether it corresponds to the week we intend to highlight:

// ...

var weekNum=0;

// ...

if (d.getDay() % 7 == 6) {

    // a variavel de controlo a ser incrementada
    weekNum++;

    // se for igual à semana indicada, aplicar classe de CSS
    if (weekNum == highlightWeek) {
        table.push('</tr><tr class="highlightWeek">');
    }
    else {
        table.push('</tr><tr>');
    }
}

// ...

Example

Your code can then be as follows:

function Calendar(id, year, month, highlightWeek) { 

    var elem  = document.getElementById(id),
        mon   = month - 1,
        d     = new Date(year, mon),
        today = new Date().getDate();

    var weekDay = ["Sun", "Mon", "Tues", "Wed", "Thu", "Fri", "Sat"];

    var months = ['January', 'Frebruary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    var table = ['<table><tr>']
    
    table.push('<th colspan = 4>' + months[mon] + '</th>' + '<th colspan = 3>' + year + '</th>' + '</tr><tr>')
    for (var i = 0; i <= 6; i++ ) {
        table.push('<th>' + weekDay[i] + '</th>');
    }
    table.push('</tr><tr>')
    
    for (var i=0; i<d.getDay(); i++) {
        table.push('<td></td>')
    }

    var weekNum = 1;

    while (d.getMonth() == mon) {

        var tdClass1 = today==d.getDate() ? 'curDay' : '';

        table.push('<td class="'+tdClass1+'">'+d.getDate()+'</td>');
        
        if (d.getDay() % 7 == 6) {

            weekNum++;

            if (weekNum == highlightWeek) {
                table.push('</tr><tr class="highlightWeek">');
            }
            else {
                table.push('</tr><tr>');
            }
        }

        d.setDate(d.getDate()+1);
    }
    for (var i=d.getDay(); i<7; i++) {
        table.push('<td></td>')
    }
    table.push('</tr></table>')
    elem.innerHTML = table.join('\n')
}

new Calendar("cal", 2015, 3, 2);
.curDay {
    font-weight:bold;
}
.highlightWeek{
    background-color:pink;
}
<div id='cal'></div>

The example above is also available on Jsfiddle.

  • It stylizes after the present day, and sometimes covers different lines. It should stylize the line <tr> whole together with the option to define which line to style. I updated the question with more details. I’m sorry I didn’t ask you a clearer question the first time.

  • @Eden Sorry for the delay, I had not noticed your change of question. I updated to stay as you want.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.