SpiderBasic

- a basic to master the web -
https://forums.spiderbasic.com/

scheduling calender with use of ListIcons

https://forums.spiderbasic.com/viewtopic.php?t=1997

Page 1 of 2

scheduling calender with use of ListIcons

Posted: Fri Oct 09, 2020 12:02 pm
by 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.

Re: scheduling calender with use of ListIcons

Posted: Fri Oct 09, 2020 5:46 pm
by 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()
!   });
! });

Re: scheduling calender with use of ListIcons

Posted: Fri Oct 09, 2020 9:35 pm
by 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

Re: scheduling calender with use of ListIcons

Posted: Fri Oct 09, 2020 10:51 pm
by Peter
Hello Markus,
kurzer wrote: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.
kurzer wrote: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

Re: scheduling calender with use of ListIcons

Posted: Sat Oct 10, 2020 8:49 am
by Kurzer
It seems a script error occurs.

Image

Re: scheduling calender with use of ListIcons

Posted: Sat Oct 10, 2020 10:57 am
by Peter
kurzer wrote:It seems a script error occurs.
strange...

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

Re: scheduling calender with use of ListIcons

Posted: Sat Oct 10, 2020 2:24 pm
by 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.

Re: scheduling calender with use of ListIcons

Posted: Mon Oct 12, 2020 1:22 pm
by Peter
Anyone else having problems with this code?

Re: scheduling calender with use of ListIcons

Posted: Mon Oct 12, 2020 5:39 pm
by plouf
here it runs and i see a calendar like the sample in fullcalendar.io with a single record

Re: scheduling calender with use of ListIcons

Posted: Mon Oct 12, 2020 5:53 pm
by Peter
@plouf: Thanks for the feedback!
All times are UTC
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited