Calendar Popup Window #182

salahoued · 2024-05-10T07:28:00Z

salahoued
May 10, 2024

I have put together a python script to generate a popup calendar:

A custom clock widget $HOME/.config/sfwbar/clock.widget


Function ("Funcal") {
  ClearWidget "CalendarPopupGrid"
  PipeRead "$HOME/.config/sfwbar/scripts/sfwbar-calendar.py"
  PopUp "CalendarPopup"
}


layout {
  grid {
    style = "frame"
    label {
      style = "date"
      interval = 1000
      # css = "label { -GtkWidget-align: 0.5; -GtkWidget-hexpand: true; -GtkWidget-vexpand: true; font: 0.3cm Sans; }"
      value = Time("%a %d %b")
      action[1] = Function "Funcal"
      tooltip = Time("%H:%M %Z \n%A %d %B %Y")
    }
    label {
      style = "time"
      interval = 1000
      #css = "* { font: 0.5cm Sans; font-weight: 400; -GtkWidget-align: 0.5; -GtkWidget-hexpand: true; -GtkWidget-vexpand: true; }"
      value = Time("%H:%M")
      action[1] = Function "Funcal"
      tooltip = Time("%H:%M %Z \n%A %d %B %Y")
    }
  }
}

#CSS
#frame {
  margin-right: 7px;
}
label#date {
	padding: 0 3px 0 4px;
	margin-bottom: 2px;
	-GtkWidget-align: 0.5;
	-GtkWidget-hexpand: true;
	-GtkWidget-vexpand: true;
	font: 0.3cm Sans;
	font-weight: 400;
}
label#time {
    font: 0.5cm Sans;
    font-weight: 400;
    -GtkWidget-align: 0.5;
    -GtkWidget-hexpand: true;
    -GtkWidget-vexpand: true;
	padding: 0 4px 0 3px;
	margin: 0;
}
#cal_pop_style {
  -GtkWidget-direction: bottom;
  -GtkWidget-hexpand: false;
  border: 1px solid @borders;
  padding: 5px 10px;
  background-color: @theme_bg_color;
}
#cal_pop_grid_style {
  -GtkWidget-direction: bottom;
}

#header_time {
  font-weight: 700;
}

#header_date {
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1px solid @borders;
}

#cal_line {
  -GtkWidget-direction: right;
}

#today, #aday {
  font-family: Monospace;
  -GtkWidget-align: 1;
  margin: 2px 2px;
  padding: 2px 2px;
}
#today {
  font-weight: 600;
  border: 1px solid alpha(#3daee9, 0.80);
  background-color: alpha(#3daee9, 0.40);
}

Python script to generate the calendar $HOME/.config/sfwbar/scripts/sfwbar-calendar.py

#!/usr/bin/env python3

import calendar
from datetime import datetime

today_time = datetime.now()
cal = calendar.Calendar()

print('''PopUp "CalendarPopup" {
  AutoClose = true
  style = "cal_pop_style"

  grid "CalendarPopupGrid" {
   style = "cal_pop_grid_style"
   label "caltime" {
      value = Time("%A            %H:%M %Z")
      style = 'header_time'
   }
   label "caldate" {
      value = Time("%B %d, %Y")
      style = "header_date"
   }
    ''')

sfw_cal = cal.monthdayscalendar(today_time.year, today_time.month)

header = '  grid {\n    style = "cal_line"\n'
for i in calendar.weekheader(2).split(' '):
    header += '      label {\n        value = "' + i + '"\n        style = "aday"\n    }\n'
print(header + '}')

for w in sfw_cal:
    week_line = '  grid {\n    style = "cal_line"\n'
    for d in w:
        week_line += '      label {\n        value = "'
        if d == 0:
            week_line += '  '
        elif d <= 9:
            week_line += ' ' + str(d)
        else:
            week_line += str(d)

        week_line += '"\n'
        if d == today_time.day:
            week_line += '        style = "today"\n'
        else:
            week_line += '        style = "aday"\n'
        week_line += '      }\n'
    print(week_line + '  }')

print('  }\n}')

01micko · 2024-05-10T07:58:38Z

01micko
May 10, 2024

Nice @salahoued

here's mine: (depends yad)

layout {

  label {
    style = "time"
    interval = 1000
    action = "sh -c 'yad --calendar --title=$(date +%B) --window-icon=date --name=date'"
    tooltip = Time("%a %b %d")+"\nPress to launch calendar"
    css = "* { font: 11pt nunito; font-weight: 900; -GtkWidget-align: 0.5; -GtkWidget-hexpand: true; -GtkWidget-vexpand: true; min-width: 36px; margin-bottom: 10px; padding: 4px; }"
    value = Time("%k:%M")
  }
}

2 replies

salahoued May 10, 2024
Author

Nice, looks good.
I have been using it since openbox/tint2 yad --calendar --title="so-calendaryad" --undecorated --no-buttons --mouse --escape-ok --close-on-unfocus --skip-taskbar

But with my labwc automatic placement policy config, it opens up in random region of the screen, so didn't like that much.
Also sfwbar does have the Popup window which offers great possibilities to make custom widgets.

01micko May 10, 2024

There is a PR for window rules that can fix that labwc/labwc#1785

Yes I've made some strange widgets with Popup - even a launcher!

salahoued · 2024-05-10T10:26:50Z

salahoued
May 10, 2024
Author

@01micko
Thank you so much, now I can put it in the logout dialog using yad I have.

0 replies

LBCrion · 2024-06-27T06:57:52Z

LBCrion
Jun 27, 2024
Maintainer

Looking at this discussion, I decided to try to implement a calendar widget without any dependencies (or additional C code). It's a bit hacky, but seems to work. It currently has it's own module button to make an example easy to try, but will be bound to the clock widget of course.

cal.widget:

Set XCalTmpl = "grid 'cal_grid' {
  label 'XCal_label$CAL_NUM$' {
    value = '$CAL_DAY$'
    style = '$CAL_STYLE$'
    loc($CAL_COL$, $CAL_ROW$)
  }
}"

Set XCalPrevMonth = If(XCalMonth=1, 12, XCalMonth-1)
Set XCalPrevYear = If(XCalMonth=1, XCalYear-1, XCalYear)
Set XCalYearIsLeap = XCalYear%4=0 & (XCalYear%100!=0 | XCalYear%400=0)
Set XCalPrevYearIsLeap = XCalPrevYear%4=0 &
  (XCalPrevYear%100!=0 | XCalPrevYear%400=0)
Set XCalNumDays = Map(Str(XCalMonth),
    "12", "31",
    "11", "30",
    "10", "31",
    "9", "30",
    "8", "31",
    "7", "31",
    "6", "30",
    "5", "31",
    "4", "30",
    "3", "31",
    "2", If(XCalYearIsLeap, "29", "28"),
    "1", "31",
    "0")

Set XCalPrevNumDays = Map(Str(XCalPrevMonth),
    "12", "31",
    "11", "30",
    "10", "31",
    "9", "30",
    "8", "31",
    "7", "31",
    "6", "30",
    "5", "31",
    "4", "30",
    "3", "31",
    "2", If(XCalPrevYearIsLeap, "29", "28"),
    "1", "31",
    "0")

Set XCalMOff = (Val(Map(Str(XCalMonth),
    "12", "5",
    "11", "3",
    "10", "0",
    "9", "5",
    "8", "2",
    "7", "6",
    "6", "4",
    "5", "1",
    "4", "6",
    "3", "3",
    "2", "3",
    "1", "0",
    "0"))+If(XCalMonth>2 & XCalYearIsLeap,1,0))%7

Set XCalDate = Map(Str(XCalMonth),
        "1", "January",
        "2", "February",
        "3", "March",
        "4", "April",
        "5", "May",
        "6", "June",
        "7", "July",
        "8", "August",
        "9", "September",
        "10", "October",
        "11", "November",
        "12", "December",
        "Huh?") + " " + Str(XCalYear)

Function("XCalPopUp") {
  Eval "XCalYear", time("%Y")
  Eval "XCalMonth", time("%m")
  Eval "XCalDay", time("%d")
  Function "XCalInit"
  PopUp "XCal"
}

Function("XCalInitLoop") {
  Config ReplaceAll($XCalTmpl,
      "$CAL_NUM$", $XCalCounter,
      "$CAL_COL$", Str(XCalCounter%7,0),
      "$CAL_ROW$", Str((XCalCounter-XCalCounter%7)/7,0),
      "$CAL_DAY$", Str(XCalCounter-XCalDOW+If(XCalCounter-XCalDOW<0,
          XCalPrevNumDays+1,
          If(XCalCounter-XCalDOW+1>XCalNumDays,1-XCalNumDays,1))),
      '$CAL_STYLE$',If(XCalCounter-XCalDOW<0 |
          XCalCounter-XCalDOW+1>XCalNumDays,
          'cal_cell_other', 'cal_cell_current')
      )
  Eval "XCalCounter", XCalCounter+1
  Function If(XCalCounter<42, "XCalInitLoop", "Noop")
}

Function("XCalInit") {
  Config "label 'cal_date' { value = $XCalDate }"
  Eval "XCalDOW", (XCalMoff+
      5*((XCalYear-1)%4)+4*((XCalYear-1)%100)+6*((XCalYear-1)%400))%7
  Eval "XCalCounter", 0
  Function "XCalInitLoop"
}

Function("XCalNextMonth") {
  Eval "XCalYear", XCalYear + If(XCalMonth=12,1,0)
  Eval "XCalMonth", If(XCalMonth=12,1,XCalMonth+1)
  Function "XCalInit"
}

Function("XCalPrevMonth") {
  Eval "XCalYear", XCalYear - If(XCalMonth=1,1,0)
  Eval "XCalMonth", If(XCalMonth=1,12,XCalMonth-1)
  Function "XCalInit"
}

Function("XCalPrevYear") {
  Eval "XCalYear", XCalYear-1
  Function "XCalInit"
}

Function("XCalNextYear") {
  Eval "XCalYear", XCalYear+1
  Function "XCalInit"
}

Popup("XCal") {
  style = "cal_popup_grid"
  label 'cal_clock' {
    value = time("%H:%M:%S")
    style = 'cal_clock'
    interval = 1000
    loc(1,1)
  }
  grid {
    loc(1,2)
    css = "* { -GtkWidget-direction: right; }"
    image {
      value = 'go-first'
      style = 'cal_arrow'
      action = Function "XCalPrevYear"
    }
    image {
      value = 'go-previous'
      style = 'cal_arrow'
      action = Function "XCalPrevMonth"
    }
    label 'cal_date' {
      style = "cal_date"
    }
    image {
      value = 'go-next'
      style = 'cal_arrow'
      action = Function "XCalNextMonth"
    }
    image {
      value = 'go-last'
      style = 'cal_arrow'
      action = Function "XCalNextYear"
    }
  }

  grid "cal_grid" {
    loc(1,3)
    style = 'cal_grid'
  }
}

layout {
  style = "module"
  button {
    style = "module"
    value = "x-office-calendar"
    action[0] = Function "XCalInit"
    action = Function "XCalPopUp"
  }
}

#CSS

window#XCal {
  background: rgba(0,0,0,0);
}

grid#cal_popup_grid {
  border-radius: 10px;
  border: 1px solid @borders;
  margin: 5px;
  padding: 10px;
  background-color: @theme_bg_color;
  -GtkWidget-hexpand: true;
  -GtkWidget-vexpand: false;
  -GtkWidget-direction: bottom;
}

grid#cal_grid {
  padding-top: 10px;
  -GtkWidget-column-homogenious: true;
  -GtkWidget-row-homogenious: true;
}

image#cal_arrow {
  min-height: 16px;
  min-width: 16px;
}

label#cal_clock {
  -GtkWidget-hexpand: true;
  -GtkWidget-halign: start;
  font-size: 32px;
  font-weight: 500;
  padding-bottom: 10px;
}

label#cal_date {
  -GtkWidget-ellipsize: false;
  -GtkWidget-hexpand: true;
  padding-top: 5px;
  padding-bottom: 5px;
}

label#cal_cell_current,
label#cal_cell_other {
  min-width: 30px;
  min-height: 30px;
}

label#cal_cell_other {
  color: RGBA(1,1,1,0.5);
}

3 replies

guzz46 Jul 11, 2024

How exactly do you use it? I've added the cal.widget and also included it in my sfwbar.config but nothing extra shows up, am I supposed to modify the clock.widget too? thanks

01micko Jul 11, 2024

@guzz46 see my post where I attached the popup to the clock, simple enough.

salahoued Jul 12, 2024
Author

Thanks a lot.
Having widgets like this, without any external code or dependencies is much better.

01micko · 2024-07-11T02:10:50Z

01micko
Jul 11, 2024

here's my clock now - just added AutoClose

cal-clock.widget

Set XCalTmpl = "grid 'cal_grid' {
  label 'XCal_label$CAL_NUM$' {
    value = '$CAL_DAY$'
    style = '$CAL_STYLE$'
    loc($CAL_COL$, $CAL_ROW$)
  }
}"

Set XCalPrevMonth = If(XCalMonth=1, 12, XCalMonth-1)
Set XCalPrevYear = If(XCalMonth=1, XCalYear-1, XCalYear)
Set XCalYearIsLeap = XCalYear%4=0 & (XCalYear%100!=0 | XCalYear%400=0)
Set XCalPrevYearIsLeap = XCalPrevYear%4=0 &
  (XCalPrevYear%100!=0 | XCalPrevYear%400=0)
Set XCalNumDays = Map(Str(XCalMonth),
    "12", "31",
    "11", "30",
    "10", "31",
    "9", "30",
    "8", "31",
    "7", "31",
    "6", "30",
    "5", "31",
    "4", "30",
    "3", "31",
    "2", If(XCalYearIsLeap, "29", "28"),
    "1", "31",
    "0")

Set XCalPrevNumDays = Map(Str(XCalPrevMonth),
    "12", "31",
    "11", "30",
    "10", "31",
    "9", "30",
    "8", "31",
    "7", "31",
    "6", "30",
    "5", "31",
    "4", "30",
    "3", "31",
    "2", If(XCalPrevYearIsLeap, "29", "28"),
    "1", "31",
    "0")

Set XCalMOff = (Val(Map(Str(XCalMonth),
    "12", "5",
    "11", "3",
    "10", "0",
    "9", "5",
    "8", "2",
    "7", "6",
    "6", "4",
    "5", "1",
    "4", "6",
    "3", "3",
    "2", "3",
    "1", "0",
    "0"))+If(XCalMonth>2 & XCalYearIsLeap,1,0))%7

Set XCalDate = Map(Str(XCalMonth),
        "1", "January",
        "2", "February",
        "3", "March",
        "4", "April",
        "5", "May",
        "6", "June",
        "7", "July",
        "8", "August",
        "9", "September",
        "10", "October",
        "11", "November",
        "12", "December",
        "Huh?") + " " + Str(XCalYear)

Function("XCalPopUp") {
  Eval "XCalYear", time("%Y")
  Eval "XCalMonth", time("%m")
  Eval "XCalDay", time("%d")
  Function "XCalInit"
  PopUp "XCal"
}

Function("XCalInitLoop") {
  Config ReplaceAll($XCalTmpl,
      "$CAL_NUM$", $XCalCounter,
      "$CAL_COL$", Str(XCalCounter%7,0),
      "$CAL_ROW$", Str((XCalCounter-XCalCounter%7)/7,0),
      "$CAL_DAY$", Str(XCalCounter-XCalDOW+If(XCalCounter-XCalDOW<0,
          XCalPrevNumDays+1,
          If(XCalCounter-XCalDOW+1>XCalNumDays,1-XCalNumDays,1))),
      '$CAL_STYLE$',If(XCalCounter-XCalDOW<0 |
          XCalCounter-XCalDOW+1>XCalNumDays,
          'cal_cell_other', 'cal_cell_current')
      )
  Eval "XCalCounter", XCalCounter+1
  Function If(XCalCounter<42, "XCalInitLoop", "Noop")
}

Function("XCalInit") {
  Config "label 'cal_date' { value = $XCalDate }"
  Eval "XCalDOW", (XCalMoff+
      5*((XCalYear-1)%4)+4*((XCalYear-1)%100)+6*((XCalYear-1)%400))%7
  Eval "XCalCounter", 0
  Function "XCalInitLoop"
}

Function("XCalNextMonth") {
  Eval "XCalYear", XCalYear + If(XCalMonth=12,1,0)
  Eval "XCalMonth", If(XCalMonth=12,1,XCalMonth+1)
  Function "XCalInit"
}

Function("XCalPrevMonth") {
  Eval "XCalYear", XCalYear - If(XCalMonth=1,1,0)
  Eval "XCalMonth", If(XCalMonth=1,12,XCalMonth-1)
  Function "XCalInit"
}

Function("XCalPrevYear") {
  Eval "XCalYear", XCalYear-1
  Function "XCalInit"
}

Function("XCalNextYear") {
  Eval "XCalYear", XCalYear+1
  Function "XCalInit"
}

Popup("XCal") {
  style = "cal_popup_grid"
  AutoClose = "true"
  label 'cal_clock' {
    value = time("%H:%M:%S")
    style = 'cal_clock'
    interval = 1000
    loc(1,1)
  }
  grid {
    loc(1,2)
    css = "* { -GtkWidget-direction: right; }"
    image {
      value = 'go-first'
      style = 'cal_arrow'
      action = Function "XCalPrevYear"
    }
    image {
      value = 'go-previous'
      style = 'cal_arrow'
      action = Function "XCalPrevMonth"
    }
    label 'cal_date' {
      style = "cal_date"
    }
    image {
      value = 'go-next'
      style = 'cal_arrow'
      action = Function "XCalNextMonth"
    }
    image {
      value = 'go-last'
      style = 'cal_arrow'
      action = Function "XCalNextYear"
    }
  }

  grid "cal_grid" {
    loc(1,3)
    style = 'cal_grid'
  }
}

layout {
  style = "module"
  label {
    style = "time"
    interval = 1000
    tooltip = Time("%a %b %d")+"\nPress to launch\ncalendar"
    css = "* { font: 10pt sans; font-weight: 900; -GtkWidget-align: 0.5; -GtkWidget-hexpand: true; -GtkWidget-vexpand: true; min-width: 36px; margin-bottom: 10px; padding: 2px; }"
    value = Time("%k:%M")
    action[0] = Function "XCalInit"
    action = Function "XCalPopUp"
  }
}

#CSS

window#XCal {
  background: rgba(0,0,0,0);
}

grid#cal_popup_grid {
  border-radius: 10px;
  border: 1px solid @borders;
  margin: 5px;
  padding: 10px;
  background-color: @theme_bg_color;
  -GtkWidget-hexpand: true;
  -GtkWidget-vexpand: false;
  -GtkWidget-direction: bottom;
}

grid#cal_grid {
  padding-top: 10px;
  -GtkWidget-column-homogenious: true;
  -GtkWidget-row-homogenious: true;
}

image#cal_arrow {
  min-height: 16px;
  min-width: 16px;
}

label#cal_clock {
  -GtkWidget-hexpand: true;
  -GtkWidget-halign: start;
  font-size: 32px;
  font-weight: 500;
  padding-bottom: 10px;
}

label#cal_date {
  -GtkWidget-ellipsize: false;
  -GtkWidget-hexpand: true;
  padding-top: 5px;
  padding-bottom: 5px;
}

label#cal_cell_current,
label#cal_cell_other {
  min-width: 30px;
  min-height: 30px;
}

label#cal_cell_other {
  color: RGBA(1,1,1,0.5);
}

clockwidget.mp4

1 reply

guzz46 Jul 11, 2024

Thanks, that works, but the only problem is it doesn't highlight the current date, do you know if there's anyway to change that?

Edit: Never mind I figured it out, %d shows the date

guzz46 · 2024-07-11T03:15:10Z

guzz46
Jul 11, 2024

I've been looking through the widget but I don't know which part is related to the date, for example how do I make the 11 go on the same line as july 2024?

7 replies

guzz46 Jul 11, 2024

Thanks, that did it, I made a few tweaks to end up with the following, the date also changes when I click the arrows, with about a half second delay, I'm not sure if I can change the color of the arrows to white though

LBCrion Jul 11, 2024
Maintainer

You can change it by adding -ScaleImage-color: red to image#cal_arrow css node.

salahoued · 2024-07-12T18:44:27Z

salahoued
Jul 12, 2024
Author

Added a style to highlight the current day:

And draw a border around the same day in different months:

ISSUE: after going back to the current date, the current day isn't highlighted the correct way:

Does anyone know of a fix (aside from closing the popup then opening it again :) )

Code:

Set XCalTmpl = "grid 'cal_grid' {
  label 'XCal_label$CAL_NUM$' {
    value = '$CAL_DAY$'
    style = '$CAL_STYLE$'
    loc($CAL_COL$, $CAL_ROW$)
  }
}"

Set XCalPrevMonth = If(XCalMonth=1, 12, XCalMonth-1)
Set XCalPrevYear = If(XCalMonth=1, XCalYear-1, XCalYear)
Set XCalYearIsLeap = XCalYear%4=0 & (XCalYear%100!=0 | XCalYear%400=0)
Set XCalPrevYearIsLeap = XCalPrevYear%4=0 &
  (XCalPrevYear%100!=0 | XCalPrevYear%400=0)
Set XCalNumDays = Map(Str(XCalMonth),
    "12", "31",
    "11", "30",
    "10", "31",
    "9", "30",
    "8", "31",
    "7", "31",
    "6", "30",
    "5", "31",
    "4", "30",
    "3", "31",
    "2", If(XCalYearIsLeap, "29", "28"),
    "1", "31",
    "0")

Set XCalPrevNumDays = Map(Str(XCalPrevMonth),
    "12", "31",
    "11", "30",
    "10", "31",
    "9", "30",
    "8", "31",
    "7", "31",
    "6", "30",
    "5", "31",
    "4", "30",
    "3", "31",
    "2", If(XCalPrevYearIsLeap, "29", "28"),
    "1", "31",
    "0")

Set XCalMOff = (Val(Map(Str(XCalMonth),
    "12", "5",
    "11", "3",
    "10", "0",
    "9", "5",
    "8", "2",
    "7", "6",
    "6", "4",
    "5", "1",
    "4", "6",
    "3", "3",
    "2", "3",
    "1", "0",
    "0"))+If(XCalMonth>2 & XCalYearIsLeap,1,0))%7

Set XCalDate = Map(Str(XCalMonth),
        "1", "January",
        "2", "February",
        "3", "March",
        "4", "April",
        "5", "May",
        "6", "June",
        "7", "July",
        "8", "August",
        "9", "September",
        "10", "October",
        "11", "November",
        "12", "December",
        "Huh?") + " " + Str(XCalYear)

Function("XCalPopUp") {
  Eval "XCalYear", time("%Y")
  Eval "XCalMonth", time("%m")
  Eval "XCalDay", time("%d")
  Function "XCalInit"
  PopUp "XCal"
}

Function("XCalInitLoop") {
  Eval "TmpCalDay", XCalCounter-XCalDOW+If(XCalCounter-XCalDOW<0,
          XCalPrevNumDays+1,
          If(XCalCounter-XCalDOW+1>XCalNumDays,1-XCalNumDays,1))
  Config ReplaceAll($XCalTmpl,
      "$CAL_NUM$", $XCalCounter,
      "$CAL_COL$", Str(XCalCounter%7,0),
      "$CAL_ROW$", Str((XCalCounter-XCalCounter%7)/7,0),
      "$CAL_DAY$", $TmpCalDay,
      '$CAL_STYLE$',If(XCalCounter-XCalDOW<0 |
          XCalCounter-XCalDOW+1>XCalNumDays,
          'cal_cell_other',
          If($TmpCalDay=Time("%d"),
          If($XCalMonth=Time("%m") & $XCalYear=Time("%Y"),
            'cal_cell_focused_current',
            'cal_cell_focused_other'
          ),
          'cal_cell_current'
          )
        )
      )
  Eval "XCalCounter", XCalCounter+1
  Function If(XCalCounter<42, "XCalInitLoop", "Noop")
}

Function("XCalInit") {
  Config "label 'cal_date' { value = $XCalDate }"
  Eval "XCalDOW", (XCalMoff+
      5*((XCalYear-1)%4)+4*((XCalYear-1)%100)+6*((XCalYear-1)%400))%7
  Eval "XCalCounter", 0
  Function "XCalInitLoop"
}

Function("XCalNextMonth") {
  Eval "XCalYear", XCalYear + If(XCalMonth=12,1,0)
  Eval "XCalMonth", If(XCalMonth=12,1,XCalMonth+1)
  Function "XCalInit"
}

Function("XCalPrevMonth") {
  Eval "XCalYear", XCalYear - If(XCalMonth=1,1,0)
  Eval "XCalMonth", If(XCalMonth=1,12,XCalMonth-1)
  Function "XCalInit"
}

Function("XCalPrevYear") {
  Eval "XCalYear", XCalYear-1
  Function "XCalInit"
}

Function("XCalNextYear") {
  Eval "XCalYear", XCalYear+1
  Function "XCalInit"
}

Popup "XCal" {
  style = "cal_popup_grid"
  AutoClose = "true"
  label 'cal_clock' {
    value = time("%H:%M:%S")
    style = 'cal_clock'
    interval = 1000
    loc(1,1)
  }
  grid {
    loc(1,2)
    css = "* { -GtkWidget-direction: right; }"
    image {
      value = 'go-first'
      style = 'cal_arrow'
      action = Function "XCalPrevYear"
      tooltip = "Previous year"
    }
    image {
      value = 'go-previous'
      style = 'cal_arrow'
      action = Function "XCalPrevMonth"
      tooltip = "Previous month"
    }
    label 'cal_date' {
      style = "cal_date"
    }
    image {
      value = 'go-next'
      style = 'cal_arrow'
      action = Function "XCalNextMonth"
      tooltip = "Next month"
    }
    image {
      value = 'go-last'
      style = 'cal_arrow'
      action = Function "XCalNextYear"
      tooltip = "Next year"
    }
  }

  grid "cal_grid" {
    loc(1,3)
    style = 'cal_grid'
  }
}

layout {
  style = "module"
  label {
    style = "time"
    interval = 1000
    tooltip = Time("%a %b %d")+"\nPress to launch\ncalendar"
    css = "* { font: 10pt sans; font-weight: 900; -GtkWidget-align: 0.5; -GtkWidget-hexpand: true; -GtkWidget-vexpand: true; min-width: 36px; margin-bottom: 10px; padding: 2px; }"
    value = Time("%k:%M")
    action[0] = Function "XCalInit"
    action = Function "XCalPopUp"
  }

}

#CSS
#frame {
  margin-right: 7px;
}

label#date {
	padding: 0 3px 0 4px;
	margin-bottom: 2px;
	-GtkWidget-align: 0.5;
	-GtkWidget-hexpand: true;
	-GtkWidget-vexpand: true;
	font: 0.3cm Sans;
	font-weight: 400;
}

label#time {
    font: 0.5cm Sans;
    font-weight: 400;
    -GtkWidget-align: 0.5;
    -GtkWidget-hexpand: true;
    -GtkWidget-vexpand: true;
	padding: 0 4px 0 3px;
	margin: 0;
}

window#XCal {
  /*background: rgba(0,0,0,0);*/
  background: @theme_bg_color;
}

grid#cal_popup_grid {
  border-radius: 10px;
  margin: 5px;
  border: 1px solid @borders;
  padding: 10px;
  background-color: @theme_bg_color;
  -GtkWidget-hexpand: true;
  -GtkWidget-vexpand: false;
  -GtkWidget-direction: bottom;
}

grid#cal_grid {
  padding-top: 10px;
  -GtkWidget-column-homogenious: true;
  -GtkWidget-row-homogenious: true;
}

image#cal_arrow {
  min-height: 16px;
  min-width: 16px;
  -ScaleImage-color: @theme_fg_color;
}

label#cal_clock {
  -GtkWidget-hexpand: true;
  -GtkWidget-halign: start;
  font-size: 26px;
  font-weight: 500;
  padding-bottom: 10px;
}

label#cal_date {
  -GtkWidget-ellipsize: false;
  -GtkWidget-hexpand: true;
  padding-top: 5px;
  padding-bottom: 5px;
}

label#cal_cell_current,
label#cal_cell_other {
  min-width: 30px;
  min-height: 30px;
}

label#cal_cell_other {
  /*color: RGBA(1,1,1,0.5);*/
  color: alpha(grey, 0.6);
}

label#cal_cell_focused_current {
  font-weight: 600;
  border: 1px solid @theme_selected_bg_color;
  background-color: alpha(@theme_selected_bg_color, 0.333);
}

label#cal_cell_focused_other {
  border: 1px solid @theme_selected_bg_color;
}

0 replies

guzz46 · 2024-07-17T21:46:38Z

guzz46
Jul 17, 2024

Does anyone know if its possible to add days along the top like in the XFCE widget below?

2 replies

salahoued Jul 17, 2024
Author

You can use this cal1.txt

or you can add the code for grid "cal_days" in you cal widget file in Popup "XCal" or Popup("XCal") section or replace it entirely with this code:

Popup "XCal" {
  style = "cal_popup_grid"
  AutoClose = "true"
  label 'cal_clock' {
    value = time("%H:%M:%S")
    style = 'cal_clock'
    interval = 1000
    loc(1,1)
  }
  grid {
    loc(1,2)
    css = "* { -GtkWidget-direction: right; }"
    image {
      value = 'go-first'
      style = 'cal_arrow'
      action = Function "XCalPrevYear"
      tooltip = "Previous year"
    }
    image {
      value = 'go-previous'
      style = 'cal_arrow'
      action = Function "XCalPrevMonth"
      tooltip = "Previous month"
    }
    label 'cal_date' {
      style = "cal_date"
    }
    image {
      value = 'go-next'
      style = 'cal_arrow'
      action = Function "XCalNextMonth"
      tooltip = "Next month"
    }
    image {
      value = 'go-last'
      style = 'cal_arrow'
      action = Function "XCalNextYear"
      tooltip = "Next year"
    }
  }

  grid "cal_days" {
    loc(1,3)
    style = 'days_grid'
    label {
      value = "Mo"
      style = "cal_cell_current"
    }
    label {
      value = "Tu"
      style = "cal_cell_current"
    }
    label {
      value = "We"
      style = "cal_cell_current"
    }
    label {
      value = "Th"
      style = "cal_cell_current"
    }
    label {
      value = "Fr"
      style = "cal_cell_current"
    }
    label {
      value = "Sa"
      style = "cal_cell_current"
    }
    label {
      value = "Su"
      style = "cal_cell_current"
    }
  }

  grid "cal_grid" {
    loc(1,4)
    style = 'cal_grid'
  }
}

At the end off your cal widget you can add this CSS code:

grid#days_grid {
  /*padding-top: 10px;*/
  margin-top: 10px;
  border-top: 1px solid @borders;
  -GtkWidget-column-homogenious: true;
  -GtkWidget-row-homogenious: true;
}

guzz46 Jul 18, 2024

Thanks, that did the trick

dantemason · 2025-02-16T08:55:10Z

dantemason
Feb 16, 2025

In case someone is used to sunday first:

Function("XCalPopUp") {
  Eval "XCalYear", time("%Y")
  Eval "XCalMonth", time("%m")
  Eval "XCalDay", time("%d")

  # XCalSundayFirst: 1=sunday first or 0=monday first
  Eval "XCalSundayFirst", 1

  Function "XCalInit"
  PopUp "XCal"
} 

Function("XCalInitLoop") {
  Eval "TmpCalDay", (XCalCounter-XCalSundayFirst)-XCalDOW+If((XCalCounter-XCalSundayFirst)-XCalDOW<0,
          XCalPrevNumDays+1,
          If((XCalCounter-XCalSundayFirst)-XCalDOW+1>XCalNumDays,1-XCalNumDays,1))
  
  Config ReplaceAll($XCalTmpl,
      "$CAL_NUM$", $XCalCounter,
      "$CAL_COL$", Str(XCalCounter%7,0),
      "$CAL_ROW$", Str((XCalCounter-XCalCounter%7)/7,0),
      "$CAL_DAY$", $TmpCalDay,
      '$CAL_STYLE$',If((XCalCounter-XCalSundayFirst)-XCalDOW<0 |
          (XCalCounter-XCalSundayFirst)-XCalDOW+1>XCalNumDays,
          'cal_cell_other',
          If($TmpCalDay=Time("%d"),
          If($XCalMonth=Time("%m") & $XCalYear=Time("%Y"),
            'cal_cell_focused_current',
            'cal_cell_focused_other'
          ),
          'cal_cell_current'
          )
        ) 
      )
  Eval "XCalCounter", XCalCounter+1
  Function If((XCalCounter)<42, "XCalInitLoop", "Noop")
}
...
...
...
Popup "XCal" {
...
...
  grid "cal_days" {
    loc(1,3)
    style = 'days_grid'
    label {
      value = "Su"
      style = "cal_cell_current"
    }
    label {
      value = "Mo"
      style = "cal_cell_current"
    }
    label {
      value = "Tu"
      style = "cal_cell_current"
    }
    label {
      value = "We"
      style = "cal_cell_current"
    }
    label {
      value = "Th"
      style = "cal_cell_current"
    }
    label {
      value = "Fr"
      style = "cal_cell_current"
    }
    label {
      value = "Sa"
      style = "cal_cell_current"
    }
#    label {
#      value = "Su"
#      style = "cal_cell_current"
#    }
  }
...
...

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Calendar Popup Window #182

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments 15 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Calendar Popup Window #182

A custom clock widget $HOME/.config/sfwbar/clock.widget

Python script to generate the calendar $HOME/.config/sfwbar/scripts/sfwbar-calendar.py

Replies: 8 comments · 15 replies

salahoued May 10, 2024 Author

salahoued May 10, 2024 Author

LBCrion Jun 27, 2024 Maintainer

salahoued Jul 12, 2024 Author

LBCrion Jul 11, 2024 Maintainer

salahoued Jul 12, 2024 Author

Added a style to highlight the current day:

And draw a border around the same day in different months:

ISSUE: after going back to the current date, the current day isn't highlighted the correct way:

Does anyone know of a fix (aside from closing the popup then opening it again :) )

Code:

salahoued Jul 17, 2024 Author

Replies: 8 comments 15 replies

salahoued May 10, 2024
Author

salahoued
May 10, 2024
Author

LBCrion
Jun 27, 2024
Maintainer

salahoued Jul 12, 2024
Author

LBCrion Jul 11, 2024
Maintainer

salahoued
Jul 12, 2024
Author

salahoued Jul 17, 2024
Author