WinUI3 Scheduler CalendarView

OOoogaBooga

11/20/2023

hello im trying to make a winui3 calendarview interactive calendar where I can predefine dates in my code and then when I launch the program I can click on specific dates and see whats scheduled for the specific date, how would I do it? I tried reading about selected calendar items but I couldn't really figure it out, can someone help me out please? I did something along these lines

        calendarView1.SelectedDates.Add(new DateTime(2023, 11, 23));
        calendarView1.SelectedDates.Add(new DateTime(2023, 11, 17));
        calendarView1.SelectedDates.Add(new DateTime(2023, 11, 18));

        calendarView1.SelectedDates.Add(new DateTime(2023, 11, 23));
        calendarView1.SelectedDates.Add(new DateTime(2023, 11, 17));
        calendarView1.SelectedDates.Add(new DateTime(2023, 11, 18));

But this doesn't exactly help me select a date I'd like to add dates that are scheduled in a calendar

DDharmang

11/20/2023

is the mode set to multiple selection? CalendarViewSelectionMode

OOoogaBooga

11/20/2023

yes SelectionMode="Multiple" in my xaml file the things above work Im just wondering how can I select these entires to read more about them for example how can I select an entry and it'll display for example when is someone going to fly to africa

DDharmang

11/20/2023

oh there should be something like calendar events lemme check @OoogaBooga i dont see anything like what we have in outlook where you see events. But what you can do is when you click on a date you can pop open a box and display what you want there with the selected date. This is something i got from chatgpt.

private void CalendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
        {
            // Get the selected date
            DateTimeOffset selectedDate = sender.SelectedDates[0];

            // Do something with the selected date
            // For example, display it in a message box
            ShowSelectedDate(selectedDate);
        }

        private void ShowSelectedDate(DateTimeOffset selectedDate)
        {
            // Implement your logic to display the selected date
            // For example, show it in a message box
            string message = $"Selected Date: {selectedDate.Date:D}";
            Microsoft.UI.Xaml.MessageBox.Show(message, "Selected Date");
        }

private void CalendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
        {
            // Get the selected date
            DateTimeOffset selectedDate = sender.SelectedDates[0];

            // Do something with the selected date
            // For example, display it in a message box
            ShowSelectedDate(selectedDate);
        }

        private void ShowSelectedDate(DateTimeOffset selectedDate)
        {
            // Implement your logic to display the selected date
            // For example, show it in a message box
            string message = $"Selected Date: {selectedDate.Date:D}";
            Microsoft.UI.Xaml.MessageBox.Show(message, "Selected Date");
        }

OOoogaBooga

11/20/2023

Yeah thats pretty much what I want but I don't see how this connect this code to my main code really I'm going to try real quick though

DDharmang

11/20/2023

dont it wont work lol... i just tried a min ago use ContentDialog

OOoogaBooga

11/20/2023

contentdialog? whats that does it work with calendarview?

DDharmang

11/20/2023

download winui3 gallery from widnows store and search

OOoogaBooga

11/20/2023

And how should I implement it with my calender view? Sorry I'm just new to winui3 and all of that I have winui3 gallery used it a couple of times Okay so I found something along the lines of this on the internet:

    <Grid x:Name="ContentArea">
        <CalendarView
            x:Name="calendarView1"
            SelectionMode="Multiple"
            IsGroupLabelVisible="True"
            IsOutOfScopeEnabled="True"
            Language="en"
            CalendarIdentifier="GregorianCalendar"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Width="900"
            Height="auto"
        >
        <CalendarView.CalendarViewDayItemStyle>
                <Style TargetType="CalendarView">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid
                                    Margin="5"
                                    VerticalAlignment="Center"
                                    >
                                    <TextBlock Text="hello"></TextBlock>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CalendarView.CalendarViewDayItemStyle>
        </CalendarView>
    </Grid>

    <Grid x:Name="ContentArea">
        <CalendarView
            x:Name="calendarView1"
            SelectionMode="Multiple"
            IsGroupLabelVisible="True"
            IsOutOfScopeEnabled="True"
            Language="en"
            CalendarIdentifier="GregorianCalendar"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Width="900"
            Height="auto"
        >
        <CalendarView.CalendarViewDayItemStyle>
                <Style TargetType="CalendarView">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid
                                    Margin="5"
                                    VerticalAlignment="Center"
                                    >
                                    <TextBlock Text="hello"></TextBlock>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CalendarView.CalendarViewDayItemStyle>
        </CalendarView>
    </Grid>

It puts text on every single day of the calendar how would I make it so the text instead would only appear on selected dates?

DDharmang

11/21/2023

dont know bro as i am also new 😄 but what you can do is if theres an "if" statement you can put that in the condition where "selectedDates[i] in eventDates" The code above also doenst work for me. Is there any c# code behind it?

OOoogaBooga

11/21/2023

all of this is pure xaml code no csharp code Here I updated it

  <Grid x:Name="ContentArea">
      <CalendarView
          x:Name="calendarView1"
          SelectionMode="Multiple"
          IsGroupLabelVisible="True"
          IsOutOfScopeEnabled="True"
          Language="en"
          CalendarIdentifier="GregorianCalendar"
          HorizontalAlignment="Center"
          VerticalAlignment="Top"
          Width="900"
          Height="auto"
      >
          <CalendarView.CalendarViewDayItemStyle>
              <Style TargetType="CalendarViewDayItem">
                  <Setter Property="Template">
                      <Setter.Value>
                          <ControlTemplate>
                              <Grid
                                  Margin="5"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Left"
                                  >
                                  <TextBlock Text="John" FontSize="14"/>
                              </Grid>
                          </ControlTemplate>
                      </Setter.Value>
                  </Setter>
              </Style>
          </CalendarView.CalendarViewDayItemStyle>
      </CalendarView>
  </Grid>

  <Grid x:Name="ContentArea">
      <CalendarView
          x:Name="calendarView1"
          SelectionMode="Multiple"
          IsGroupLabelVisible="True"
          IsOutOfScopeEnabled="True"
          Language="en"
          CalendarIdentifier="GregorianCalendar"
          HorizontalAlignment="Center"
          VerticalAlignment="Top"
          Width="900"
          Height="auto"
      >
          <CalendarView.CalendarViewDayItemStyle>
              <Style TargetType="CalendarViewDayItem">
                  <Setter Property="Template">
                      <Setter.Value>
                          <ControlTemplate>
                              <Grid
                                  Margin="5"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Left"
                                  >
                                  <TextBlock Text="John" FontSize="14"/>
                              </Grid>
                          </ControlTemplate>
                      </Setter.Value>
                  </Setter>
              </Style>
          </CalendarView.CalendarViewDayItemStyle>
      </CalendarView>
  </Grid>

Try this I dont know why this doesnt work as well

<Button x:Name="Test123" Content="Empty cart">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="All items will be removed. Do you want to continue?" Margin="0,0,0,12" />
                <Button Click="DeleteConfirmation_Click" Content="Yes, empty my cart" />
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

<Button x:Name="Test123" Content="Empty cart">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="All items will be removed. Do you want to continue?" Margin="0,0,0,12" />
                <Button Click="DeleteConfirmation_Click" Content="Yes, empty my cart" />
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

I'm trying to stick this into my xaml page in one of the sections of my page but it doesn't react to the CS, the CS can't seem to detect the name Here's the CS Code

    private void DeleteConfirmation_Click(object sender, RoutedEventArgs e)
    {
        if (this.Test123 is Flyout f)
        {
            f.Hide();
        }
    }

    private void DeleteConfirmation_Click(object sender, RoutedEventArgs e)
    {
        if (this.Test123 is Flyout f)
        {
            f.Hide();
        }
    }

DDharmang

11/21/2023

is this for the popup? If so i can share the code for it i dont know how to bind to the xaml element but you can do this. i have added in code.

DDharmang

11/21/2023

OOoogaBooga

11/21/2023

Yeah that's exactly what I got but I don't know how to link it to the xaml code either

DDharmang

11/21/2023

what i wanted to do is change the text Visibility property if the current selected date is not in the events

Looking for more? Join the community!

WinUI3 Scheduler CalendarView

Join Server

WinUI3 Scheduler CalendarView

Join Server

Want results from more Discord servers?

Add your server