Issue loading Calendar with multiple tabs
smasterson opened this issue · 11 comments
I'm finding the calendar does not load correctly if it is positioned on a tab that is not shown first.
New-HTML -Name 'Calendar Load Test' -FilePath "$home\desktop\Calendar01.html" -Show {
New-HTMLTab -name tab1 {
New-HTMLText -Text "test"
}
New-HTMLtab -name tab2 {
New-HTMLSection -HeaderText 'Test 2' {
New-HTMLCalendar {
New-CalendarEvent -Title 'Active Directory Meeting' -Description 'We will talk about stuff' -StartDate (Get-Date)
New-CalendarEvent -Title 'Lunch' -StartDate (Get-Date).AddDays(2).AddHours(-3) -EndDate (Get-Date).AddDays(3) -Description 'Very long lunch'
}
}
}
} -Online
If tab2 loads 'showing/first' it will appear correctly:
If tab1 loads 'showing/first' (the usual behavior) and you then switch to tab2, the calendar is not loaded correctly:
If you click the month/week/day buttons it will render but the dimensions are a bit off.
I found if you refresh the page while viewing tab2 it will refresh correctly, conversely if you refresh while on tab1 it breaks the calendar on tab2 again.
Tested using Brave/Chrome
Incredible job on this project, thanks a bunch!
Bonus question - is there a way to set the initial view (month/week/day)?
Well - the bug is similar to what we had in DataTables with Tabs. I and @opustecnica fixed it for DataTables with occasional problems.
I've tried to fix it for FullCalendar but I am too weak to fight JS.
I've upgraded FullCalendar 4.3 to 5.1 and added your InitialView request - but the problem with tabs is not fixed.
I asked for help on StackOverflow and this is what they proposed: https://codepen.io/basheerahmed/pen/PoZxxaj?editors=1001
It seems to work, but I would need to translate it to PSWriteHTML.
I've fixed this issue with huge help from StackOverflow: https://stackoverflow.com/questions/62977996/uncaught-typeerror-fullcalendar-is-not-a-function-error
I'm using tracking ids and it seems to be working properly.
Import-Module .\PSWriteHTML.psd1 -Force
New-HTML -Name 'Test' -FilePath "$PSScriptRoot\Example28-Calendar02.html" -Show {
New-HTMLTab -Name 'Test' {
New-HTMLCalendar {
New-CalendarEvent -Title 'Active Directory Meeting' -Description 'We will talk about stuff' -StartDate (Get-Date)
New-CalendarEvent -Title 'Lunch' -StartDate (Get-Date).AddDays(2).AddHours(-3) -EndDate (Get-Date).AddDays(3) -Description 'Very long lunch'
} -InitialView listWeek
}
New-HTMLTab -Name 'Test 2' {
New-HTMLSection -HeaderText 'Calendars' {
New-HTMLCalendar {
New-CalendarEvent -Title '213Active Directory Meeting' -Description 'We will talk about stuff' -StartDate (Get-Date)
New-CalendarEvent -Title '213Lunch' -StartDate (Get-Date).AddDays(2).AddHours(-3) -EndDate (Get-Date).AddDays(3) -Description 'Very long lunch'
}
New-HTMLCalendar {
New-CalendarEvent -Title 'Diff 123 meeting' -Description 'We will talk about stuff' -StartDate (Get-Date)
New-CalendarEvent -Title 'Ooops 123 i did it again' -StartDate (Get-Date).AddDays(2).AddHours(-3) -EndDate (Get-Date).AddDays(3) -Description 'Very long lunch'
} -InitialView timeGridDay
}
New-HTMLSection -HeaderText 'Table' {
New-HTMLTable -DataTable (Get-Process | Select-Object -First 3)
}
}
New-HTMLTab -Name 'Test 3' {
New-HTMLCalendar {
New-CalendarEvent -Title 'Diff meeting' -Description 'We will talk about stuff' -StartDate (Get-Date)
New-CalendarEvent -Title 'Ooops i did it again' -StartDate (Get-Date).AddDays(2).AddHours(-3) -EndDate (Get-Date).AddDays(3) -Description 'Very long lunch'
} -InitialView timeGridDay
New-HTMLTable -DataTable (Get-Process | Select-Object -First 3)
}
} -OnlinePublished to PSGallery
Excellent work! Seems to be loading correctly now :-)
Is it possible to add timeGridWeek to the InitialView options?
On the downside it appears tooltips (description) is no longer working :-(
Can't thank you enough for the effort you put in on this entire project!
It may be things changed between 4.3 and 5.1. Will check if it can be fixed. Enjoy
I took the list from: https://fullcalendar.io/docs/initialView
But maybe it's possible to use all values. Haven't tested. Did you?
Seems to work just adding it to the ValidateSet
[ValidateSet(
'dayGridWeek', 'timeGridDay', 'listWeek', 'dayGridMonth', 'timeGridWeek'
)][string] $InitialView
Please add as PR?
I appreciate the ask for the add....it's been a while.
Second PR created to fix the tooltip 'issue' introduced after 5.1 update
Thank you! I'm glad you're enjoying this.
New version is now published.