FaceTune/dashboard.js at main · nirutthyu/FaceTune · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
function opennav(){
    var sidePanel=document.getElementById("sidePanel")
    if(sidePanel.style.width=="0px")
    {
    sidePanel.style.width="25%";
}
else{
    sidePanel.style.width="0px";
}
}
document.addEventListener('DOMContentLoaded', function() {
    const monthDisplay = document.getElementById('monthDisplay');
    const calendarContainer = document.getElementById('calendarContainer');
    const nextBtn = document.getElementById('nextBtn');

    // Function to generate a calendar for a specific month and year
    function generateCalendar(year, monthIndex) {
      const currentDate = new Date(year, monthIndex);
      const firstDayOfMonth = new Date(year, monthIndex, 1);
      const lastDayOfMonth = new Date(year, monthIndex + 1, 0);
      const daysInMonth = lastDayOfMonth.getDate();

      monthDisplay.textContent = currentDate.toLocaleString('en-US', { month: 'long', year: 'numeric' });

      calendarContainer.innerHTML = '';

      // Create day headers
      const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      for (let i = 0; i < 7; i++) {
        const dayHeader = document.createElement('div');
        dayHeader.classList.add('day');
        dayHeader.textContent = dayNames[i];
        calendarContainer.appendChild(dayHeader);
      }

      // Fill in the dates
      let dayCounter = 1;
      for (let i = 0; i < 42; i++) {
        const dayCell = document.createElement('div');
        dayCell.classList.add('day');
        if (i >= firstDayOfMonth.getDay() && dayCounter <= daysInMonth) {
          dayCell.textContent = dayCounter;
          dayCounter++;
        }
        calendarContainer.appendChild(dayCell);
      }
    }

    // Initial calendar generation for the current month
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonthIndex = currentDate.getMonth();
    generateCalendar(currentYear, currentMonthIndex);

    // Event listener for next month button
    nextBtn.addEventListener('click', function() {
      const nextMonthIndex = (currentMonthIndex + 1) % 12;
      const nextYear = nextMonthIndex === 0 ? currentYear + 1 : currentYear;
      generateCalendar(nextYear, nextMonthIndex);
    });
  });


// function makeGrid() {
//     var m = $('#inputHeight').val();
//     var n = $('#inputWidth').val();
//    $("#pixelCanvas").empty();
//     for (let x = 1; x <= m; x++) {
//         var RowId = 'row' + x;
//         $('#pixelCanvas').append('<tr id=' + RowId + '></tr>');

//         for (let y = 1; y <= n; y++) {
//             var cellId = 'cell' + x + '-' + y;
//             $('#' + RowId).append('<td id=' + cellId + '></td>');
//         }
//     }
//     $('td').click(function(){
//         var color=$("#colorPicker").val();
//         if($(this).attr("style")){
//             $(this).removeAttr("style");
//         }
//         else{
//         $(this).attr("style","background-color:"+color)}

//         }
//         );
// }