README.md

Just a calendar widget V2

Description

This is just a 2x2 widget that displays the current calendar (Small Widget)

Some settings (color, font) can be changed, other areas (alignment, padding) are WIP

Feel free to change the widget background color, image, or even set the "invisible" background from mzeryck's script here

Calendar highlight inspired by scriptable-calendar-widget.md

Sample image

just_calendar_widget.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: purple; icon-glyph: calendar-alt;
const spaceDays = 5
const dayFont = new Font('verdana', 10.5)
const dayColor = new Color('fff')
const todayHilite = new Color('DBD5B5')
const todayColor = new Color('284B63')
const dayXColor = new Color('#ddd', 0.5)
const monthColor = new Color('#CC3F0C')
const yearColor = new Color('#9A6D38')
const imgURL = "https://i.ibb.co/4Nz9wqp/pexels-photo-3117134.jpg"

let thisDay = new Date()
let thisDayDate = thisDay.getDate()
let thisMonth = thisDay.getMonth()
let thisYear = thisDay.getFullYear()
thisMonthStr = thisMonth < 10 ? '0' + (thisMonth + 1).toString() : (thisMonth + 1).toString()
let firstWkdayOfMonth = (
  new Date(`${thisYear}-${thisMonthStr}-01`).getDay()
)

//testing only
/*
let thisDay = new Date('2020-02-08')
let firstWkdayOfMonth = 6
let thisDayDate = 15
let thisMonth = 7
let thisYear = 2020
*/

let februaryDays = (leapYear(thisDay.getFullYear())) ? 29 : 28;

let months = [
  {'name': 'january', 'days': 31},
  {'name': 'february', 'days': februaryDays}, 
  {'name': 'march', 'days': 31},
  {'name': 'april', 'days': 30},
  {'name': 'may', 'days':31},
  {'name': 'june', 'days':30},
  {'name': 'july', 'days':31},
  {'name': 'august', 'days':31},
  {'name': 'september', 'days':30},
  {'name': 'october', 'days':31},
  {'name': 'november', 'days':30},
  {'name': 'december', 'days':31}
]

// Choose Sunday first wkdays[0] or Monday first
const weekDays = [
  [0, ['S', 'M', 'T', 'W', 'T', 'F', 'S']],
  [1, ['M', 'T', 'W', 'T', 'F', 'S', 'S']]
]

let wkDayFirst = weekDays[1]

let mondayOffset = wkDayFirst[0] ? firstWkdayOfMonth - 1 : firstWkdayOfMonth
if (mondayOffset < 0) {mondayOffset = 6}
const spaceMonthYear = months[thisMonth].name.length < 5 ? 50: 10 
let prevMonth = ((thisMonth - 1) < 0) ? 11 : (thisMonth - 1)
let prevMonthTotalDays = months[prevMonth].days
let prevMonthDays = []

for (let i = 0; i < mondayOffset; i++) {
  prevMonthDays.push(prevMonthTotalDays - i)
}

let showPrevMdays = prevMonthDays.reverse()
let daysInMonth = months[thisMonth].days

let widget = new ListWidget()
widget.setPadding(0, 7, 0, 0)

let imgBG = await getBG(imgURL)
widget.backgroundImage = imgBG

// widget.backgroundColor = new Color('#ccc',1)

let monthYearRow = widget.addStack()
monthYearRow.layoutHorizontally()
let monthTxt = monthYearRow.addText(months[thisMonth].name.toUpperCase())
monthTxt.textColor = monthColor
monthYearRow.addSpacer(spaceMonthYear)
let yearTxt = monthYearRow.addText(thisYear.toString())
yearTxt.textColor = yearColor
widget.addSpacer(10)

wkDayRow = widget.addStack()
wkDayRow.layoutHorizontally()
wkDayRow.setPadding(0, 2, 0, 0)
for (let i = 0; i < 7; i++) {
    let wkdayTxt = wkDayRow.addText(wkDayFirst[1][i])
    wkdayTxt.font = dayFont
    wkdayTxt.textColor = dayColor
    wkdayTxt.centerAlignText()
    wkDayRow.addSpacer(12)
}

row1 = widget.addStack()
row2 = widget.addStack()
row3 = widget.addStack()
row4 = widget.addStack()
row5 = widget.addStack()
row6 = widget.addStack()

let dayOne = 1

let strThisMonth = thisMonth.toString()

for (let i = 0; i < daysInMonth + mondayOffset; i++) {
  if (i < mondayOffset) {
      addDaysRow(showPrevMdays[i].toString(), dayXColor, row1, prev=true)
      dayOne--
      row1.addSpacer(spaceDays)
  }
  else {
    let strDayOne = dayOne.toString()
    if (i < 7) {
      addDaysRow(strDayOne, dayColor, row1)
      row1.addSpacer(spaceDays)
    }
    else if (i < 14) {
      addDaysRow(strDayOne, dayColor, row2)
      row2.addSpacer(spaceDays)
    }
    else if (i < 21) {
      addDaysRow(strDayOne, dayColor, row3)
      row3.addSpacer(spaceDays)
    }
    else if (i < 28){
      addDaysRow(strDayOne, dayColor, row4)
      row4.addSpacer(spaceDays)
    }
    else if (i < 28 + 7) {
      addDaysRow(strDayOne, dayColor, row5)
      row5.addSpacer(spaceDays)
    }
    else {
      addDaysRow(strDayOne, dayColor, row6)
      row6.addSpacer(spaceDays)
    }
  }
  dayOne++
}

function addDaysRow(dayNum, color, row, prev=false) {
    let s = row.addStack()
    s.layoutHorizontally()
    s.size = new Size(15, 15)
    if (dayNum == thisDayDate && !prev) {
      const highlightedDate = dayHighlight(dayNum, todayColor, todayHilite)
      s.addImage(highlightedDate);
    }
    else {
      let dayShow = s.addText(dayNum)
      dayShow.font = dayFont
      dayShow.textColor = color
      dayShow.centerAlignText()
    } 
}

function leapYear(year) {
    return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}

function dayHighlight (day, todayColor, hilite) {
  const drawToday = new DrawContext();
  const size = 35;
  drawToday.size = new Size(size, size);
  drawToday.opaque = false;
  drawToday.setFillColor(hilite);
  drawToday.fillEllipse(new Rect(1, 1, size - 2, size - 2));
  drawToday.setFont(new Font('verdana', 24));
  drawToday.setTextAlignedCenter();
  drawToday.setTextColor(todayColor);
  drawToday.drawTextInRect(day, new Rect(-1, 1, size, size));
  const currentDayImg = drawToday.getImage();
  return currentDayImg;
}

async function getBG(url) {
   let imgReq = new Request(url)
   return await imgReq.loadImage()
}

Script.setWidget(widget)
Script.complete()

if (config.runsInWidget) {
    widget.presentSmall()
} else {
    widget.presentSmall()
}