scheduling calender with use of ListIcons

[menschmarkus]

Hi,
this is furthermore a base for a discussion. I found in Forum scheduling calender ideas using Canvas. I tried it out but found using ListIcons is easier.
Following my sample for the scheduling calender.

Code: Select all

;
; Schedule Calender with use of ListIcons
; Created By: menschmarkus
; Creation date:  2020-10-09
; License: This code can be freely used and adapted to personal or commercial use

Enumeration
  #cal_01
  #cal_02
  #cal_03
  #cal_04
  #cal_05
  #cal_06
  #cal_07
  #cal_11
  #cal_12
  #cal_13
  #cal_14
  #cal_15
  #cal_16
  #cal_17
  #cal_21
  #cal_22
  #cal_23
  #cal_24
  #cal_25
  #cal_26
  #cal_27
  #cal_31
  #cal_32
  #cal_33
  #cal_34
  #cal_35
  #cal_36
  #cal_37
  #cal_41
  #cal_42
  #cal_43
  #cal_44
  #cal_45
  #cal_46
  #cal_47
  #cal_51
  #cal_52
  #cal_53
  #cal_54
  #cal_55
  #cal_56
  #cal_57
EndEnumeration

Global dayname.s = "Mo,Di,Mi,Do,Fr,Sa,So"
Global monthname.s = "Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember"

Procedure ListIconKalender(MyYear.i,MyMonth.i,MyDay.i)
  Protected c_width.i, c_height.i, dow.i, today.i, monatsstart.i, anzeigemonat.i, weeky.i = 2, weekx.i = 1, i.i
  anfragetag = Date(MyYear,MyMonth,MyDay,0,0,1)
  monatsstart = Date(Year(anfragetag),Month(anfragetag),1,0,0,1)
  anzeigemonat = Month(monatsstart)
  dow = DayOfWeek(monatsstart)
  If dow = 0 : dow = 7 : EndIf
  OpenWindow(0,#PB_Any,#PB_Any,#PB_Any,#PB_Any,"Kalender",#PB_Window_Background)  
  c_width = WindowWidth(0) / 7
  c_height = WindowHeight(0) / 7
  
  For i = 0 To 41
    If i >= (dow - 1) And i < 7
      If dow = 1
        ListIconGadget(i,5,c_height,c_width,c_height,"",15,#PB_ListIcon_GridLines | #PB_ListIcon_FullRowSelect)
      Else
        ListIconGadget(i,c_width * i,c_height,c_width,c_height,"",15,#PB_ListIcon_GridLines | #PB_ListIcon_FullRowSelect)
      EndIf
      AddGadgetColumn(i,1,"Zeit",c_width / 6)
      AddGadgetColumn(i,2,StringField(dayname,dow,",") + ", " + Str(Day(monatsstart)) + ". " + StringField(monthname,Month(monatsstart),",") + " " + Str(Year(monatsstart)),c_width / 12* 9 + 2)
      AddGadgetColumn(i,3,"id",0)
      If dow >= 6 And dow <= 7
        SetGadgetColor(i,#PB_Gadget_BackColor,$FFF8F0)
      EndIf
      If Day(anfragetag) = Day(monatsstart)
        SetGadgetColor(i,#PB_Gadget_BackColor,$CDEBFF)
        AddGadgetItem(i,CountGadgetItems(i) + 1,"§" + Chr(10) + FormatDate("%hh:%ii",Date()) + Chr(10) + "There is something to do!" + Chr(10) + Str(Date()))
      EndIf        
      monatsstart + 86400  
      dow = DayOfWeek(monatsstart)
      If dow = 0 : dow = 7 : EndIf
    ElseIf i > 6
      If dow = 1
        ListIconGadget(i,5,c_height * weeky,c_width,c_height,"",15,#PB_ListIcon_GridLines | #PB_ListIcon_FullRowSelect)        
      Else
        ListIconGadget(i,c_width * (dow-1),c_height * weeky,c_width,c_height,"",15,#PB_ListIcon_GridLines | #PB_ListIcon_FullRowSelect)
      EndIf
      AddGadgetColumn(i,1,"Zeit",c_width / 6)
      AddGadgetColumn(i,2,StringField(dayname,dow,",") + ", " + Str(Day(monatsstart)) + ". " + StringField(monthname,Month(monatsstart),",") + " " + Str(Year(monatsstart)),c_width / 12* 9 + 2)
      AddGadgetColumn(i,3,"id",0)
      If dow >= 6 And dow <= 7
        SetGadgetColor(i,#PB_Gadget_BackColor,$FFF8F0)
      EndIf
      If Day(anfragetag) = Day(monatsstart)
        SetGadgetColor(i,#PB_Gadget_BackColor,$CDEBFF)
        AddGadgetItem(i,CountGadgetItems(i) + 1,"§" + Chr(10) + FormatDate("%hh:%ii",Date()) + Chr(10) + "There is something to do!" + Chr(10) + Str(Date()))
      EndIf
      monatsstart + 86400  
      dow = DayOfWeek(monatsstart)
      If dow = 0 : dow = 7 : EndIf  
      If dow = 1 : weeky + 1 : EndIf  
      If anzeigemonat <> Month(monatsstart) : ProcedureReturn : EndIf 
    EndIf
  Next  
  ProcedureReturn
EndProcedure  

Procedure resize()
  Protected c_width.i, c_height.i
  c_width = WindowWidth(0) / 7
  c_height = WindowHeight(0) / 7
  ResizeGadget(#cal_01,5,c_height,c_width,c_height)
  ResizeGadget(#cal_02,c_width,c_height,c_width,c_height)
  ResizeGadget(#cal_03,c_width * 2,c_height,c_width,c_height)
  ResizeGadget(#cal_04,c_width * 3,c_height,c_width,c_height)
  ResizeGadget(#cal_05,c_width * 4,c_height,c_width,c_height)
  ResizeGadget(#cal_06,c_width * 5,c_height,c_width,c_height)
  ResizeGadget(#cal_07,c_width * 6,c_height,c_width,c_height)
  
  ResizeGadget(#cal_11,5,c_height * 2,c_width,c_height)
  ResizeGadget(#cal_12,c_width,c_height * 2,c_width,c_height)
  ResizeGadget(#cal_13,c_width * 2,c_height * 2,c_width,c_height)
  ResizeGadget(#cal_14,c_width * 3,c_height * 2,c_width,c_height)
  ResizeGadget(#cal_15,c_width * 4,c_height * 2,c_width,c_height)
  ResizeGadget(#cal_16,c_width * 5,c_height * 2,c_width,c_height)
  ResizeGadget(#cal_17,c_width * 6,c_height * 2,c_width,c_height)
  
  ResizeGadget(#cal_21,5,c_height * 3,c_width,c_height)
  ResizeGadget(#cal_22,c_width,c_height * 3,c_width,c_height)
  ResizeGadget(#cal_23,c_width * 2,c_height * 3,c_width,c_height)
  ResizeGadget(#cal_24,c_width * 3,c_height * 3,c_width,c_height)
  ResizeGadget(#cal_25,c_width * 4,c_height * 3,c_width,c_height)
  ResizeGadget(#cal_26,c_width * 5,c_height * 3,c_width,c_height)
  ResizeGadget(#cal_27,c_width * 6,c_height * 3,c_width,c_height)
  
  ResizeGadget(#cal_31,5,c_height * 4,c_width,c_height)
  ResizeGadget(#cal_32,c_width,c_height * 4,c_width,c_height)
  ResizeGadget(#cal_33,c_width * 2,c_height * 4,c_width,c_height)
  ResizeGadget(#cal_34,c_width * 3,c_height * 4,c_width,c_height)
  ResizeGadget(#cal_35,c_width * 4,c_height * 4,c_width,c_height)
  ResizeGadget(#cal_36,c_width * 5,c_height * 4,c_width,c_height)
  ResizeGadget(#cal_37,c_width * 6,c_height * 4,c_width,c_height)
  
  ResizeGadget(#cal_41,5,c_height * 5,c_width,c_height)
  ResizeGadget(#cal_42,c_width,c_height * 5,c_width,c_height)
  ResizeGadget(#cal_43,c_width * 2,c_height * 5,c_width,c_height)
  ResizeGadget(#cal_44,c_width * 3,c_height * 5,c_width,c_height)
  ResizeGadget(#cal_45,c_width * 4,c_height * 5,c_width,c_height)
  ResizeGadget(#cal_46,c_width * 5,c_height * 5,c_width,c_height)
  ResizeGadget(#cal_47,c_width * 6,c_height * 5,c_width,c_height)
  
  ResizeGadget(#cal_51,5,c_height * 6,c_width,c_height)
  ResizeGadget(#cal_52,c_width,c_height * 6,c_width,c_height)
  ResizeGadget(#cal_53,c_width * 2,c_height * 6,c_width,c_height)
  ResizeGadget(#cal_54,c_width * 3,c_height * 6,c_width,c_height)
  ResizeGadget(#cal_55,c_width * 4,c_height * 6,c_width,c_height)
  ResizeGadget(#cal_56,c_width * 5,c_height * 6,c_width,c_height)
  ResizeGadget(#cal_57,c_width * 6,c_height * 6,c_width,c_height)
  
EndProcedure

Procedure LeftClick()
  Debug GetActiveGadget()
  Debug GetGadgetItemText(GetActiveGadget(),GetGadgetState(GetActiveGadget()),2)
EndProcedure

BindEvent(#PB_Event_LeftClick,@Leftclick())
BindEvent(#PB_Event_SizeDesktop,@resize())
BindEvent(#PB_Event_SizeWindow,@resize())

ListIconKalender(2020,2,31)    ; ListIconKalender(Year,Month,Day)

It would be great to hear (read) your opinion about this way creating a scheduling calender.

[Peter]

No offense, but to be honest, I do not find this kind of presentation very attractive.

You could alternatively use the FullCalender, which offers many functionalities. Here is a small example:

Code: Select all

EnableExplicit

Enumeration
  #Window
  #Container
EndEnumeration

Procedure Main()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 600, "Calendar", #PB_Window_ScreenCentered)
  
  ContainerGadget(#Container, 10, 10, WindowWidth(#Window) - 20, WindowHeight(#Window) -20) : CloseGadgetList()
  
  Protected GID = GadgetID(#Container)
  
  ! var calendar = new FullCalendar.Calendar(v_gid.div, {
  !   aspectRatio: 1.5,
  !   locale: 'de',
  !   initialView: 'dayGridMonth',
  !   initialDate: '2020-10-09',
  !   selectable: true,
  !   headerToolbar: {
  !     left: 'prev,next today',
  !     center: 'title',
  !     right: 'dayGridMonth,timeGridWeek,timeGridDay'
  !   },
  !   events: [
  !     {
  !       title: 'My Event (drag me)',
  !       start: '2020-10-09',
  !       editable: true,
  !     }
  !     // other events here
  !   ],  
  ! });
  
  ! calendar.render();
  
EndProcedure

! $("<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.css' />").appendTo("head");

! require(["https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.js"], function() {
!   require(["https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/locales-all.min.js"], function() {
Main()
!   });
! });

[Kurzer]

Peter, nothing happens when I start your example.
Even if I add a Main() at the end, I only see an empty Window.

Markus

[Peter]

Hello Markus,

nothing happens when I start your example.

The code loads with the require function CSS and JS data from a CDN (jsdelivr).

Please look into the console to see if anything has gone wrong.

Even if I add a Main() at the end, I only see an empty Window.

The call of the Main() function must remain in the second require function. Only when both JS files have been successfully loaded, the Main() function may be called.

Greetings ... Peter

[Kurzer]

It seems a script error occurs.

[Peter]

It seems a script error occurs.

strange...

try this one:
http://spiderbytes.tuebben.de/downloads ... arDemo.zip

[Kurzer]

Thanks, peter.
With local ressources it works. With external ressources not.

Already, when I swap the first line of resource binding with the external resource binding (https://), the calendar looks bad as hell.

Code: Select all

; ! $("<link rel='stylesheet' href='resources/lib/main.min.css' />").appendTo("head");
! $("<link rel='stylesheet' href='http://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.css' />").appendTo("head");

But the whole thing is not sooo dramatic. I just wanted to try out your code.

[Peter]

Anyone else having problems with this code?

[plouf]

here it runs and i see a calendar like the sample in fullcalendar.io with a single record

[Peter]

@plouf: Thanks for the feedback!