New to plugin development

Need help Plugins
1

Hey there,

I am very new to plugin development and try to start with implementing the vanilla calendar library.

Maybe someone can point me in the right direction.

This is my element code:

<!-- Some CSS -->
<style>
$day_size: 70;
$main_color: #60c84f;

@import url(https://fonts.googleapis.com/css?family=Lato:300);

body {
  background: #ccc;
  font-family: Lato, sans-serif;
  font-weight: 300;
}

#calendar {
  width: 7 * $day_size + px;
  margin: 0 auto;
  
  h2 {
line-height: 170px;
margin: 0;
font-weight: 300;
color: #fff;
background: $main_color;
text-align: center;
  }
  
  table {
width: 100%;
margin-top: -42px;
border-collapse: collapse;
  }
  
  .week-days {
color: #fff;
  }
  
  .day {
width: $day_size + px;
height: 40px;
text-align: center;
  }
  
  .week {
.day {
  background: #eee;
  
  &:not(.other-month):hover {
    color: #fff;
    background: $main_color;
  }
}
  }
  
  .other-month {
opacity: 0.5;
  }
}

p {
  text-align: center;
}</style>

<!-- Load the Vanilla Calendar library from the CDN -->
<script src="https://unpkg.com/vanilla-calendar@latest/dist/vanilla-calendar.min.js"></script>

<!-- Create the calendar container element -->
<div id="calendar"></div>

and this is my initialize function:

function initialize() {
  var days_labels = ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
      months_labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  
  var days_in_month = getDaysInMonth(params.month, params.year),
      first_day_date = new Date(params.year, params.month, 1),
      first_day_weekday = first_day_date.getDay();
  
  var prev_month = params.month == 0 ? 11 : params.month - 1,
      prev_year = prev_month == 11 ? params.year - 1 : params.year,
      prev_days = getDaysInMonth(prev_month, prev_year);
  
  // calendar header
  var html = '<h2>' + months_labels[params.month] + ' ' + params.year + '</h2>';
  
  function getDaysInMonth(month, year) {
    // 0 = last day of the previous month
    return new Date(year, month + 1, 0).getDate();
  }
  
  // calendar content
  html += '<table class="calendar-table">';
  
  // week days labels
  html += '<tr class="week-days">';
  for (var i = 0; i <= 6; i++) {
    html += '<td class="day">';
    html += days_labels[i];
    html += '</td>';
  }
  html += '</tr>';
  
  var w = 0; // week day
  var n = 1; // next days date
  var c = 1; // current date
  
  // dates loop
  for (var i = 0; i < 6*days_labels.length; i++) {
    if (w == 0) {
      // first week's day
      html += '<tr class="week">';
    }    
    
    if (i < new Date(params.year, params.month, 1).getDay()) {
      // previous month's day
      html += '<td class="day other-month">' + (prev_days - first_day_weekday + i + 1) + '</td>';
    } else if (c > days_in_month) {
      // next month's day
      html += '<td class="day other-month">' + n + '</td>';
      n++;
    } else {
      // current month's day
      var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
      var display_date = new Date(params.year, params.month, c);
      html += '<td class="day" title="' + display_date.toLocaleDateString('en-GB', options) + '">' + c + '</td>';
      c++;
    }
    
    if (w == days_labels.length - 1) {
      // last week's day
      html += '</tr>';
      w = 0;
    } else {
      w++;
    }
  }  

  html += '</tr>'; 
  return html;
}

var now = new Date();
var params = {
  month: now.getMonth(),
  year: now.getFullYear()
};
document.getElementById('calendar').innerHTML = calendar(params);

}

But nothing is display when using the element on a sample page.

Thanks in advance.

3

Don’t load your script on the shared tab header. This is not a good practice for this kind of plugin. Shared header will be added to all pages and not just thenone that have the plugin element.

@daviddr17 the best is to take a plugin courses available. Actually you don’t seem to use initialize function correctly and a large part of the script should be in update function. In initialize you should append element like div to canvas while the script should be called in update function. There’s a lot to explain and you may find answer in the forum but a course will help a lot. Also, you can check script on similar free plugin to better understand how they are built.

4

thank you @Jici

Do you have any tutorial recommendations for beginners?

5

I started with the copilot courses Copilot Courses
but at this moment, this was almost the only one available. Since, there’s a lot more available from different providers.

1 Like