C#•8mo ago

WinUI3 Scheduler CalendarView

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

14 Replies

Dharmang•8mo ago

is the mode set to multiple selection? CalendarViewSelectionMode

OoogaBooga•8mo ago

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

Dharmang•8mo ago

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");
        }

OoogaBooga•8mo ago

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

Dharmang•8mo ago

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

OoogaBooga•8mo ago

contentdialog? whats that does it work with calendarview?

Dharmang•8mo ago

download winui3 gallery from widnows store and search

OoogaBooga•8mo ago

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?

Dharmang•8mo ago

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?

OoogaBooga•8mo ago

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();
        }
    }

Dharmang•8mo ago

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.

Dharmang•8mo ago

MainWindow.xaml

MainWindow.xaml.cs

OoogaBooga•8mo ago

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

Dharmang•8mo ago

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

Gaming

Programming

WinUI3 Scheduler CalendarView