diff --git a/pom.xml b/pom.xml
index 8881cf6..cf98151 100644
--- a/pom.xml
+++ b/pom.xml
@@ -86,8 +86,22 @@
0.0.1
+
+ org.vaadin.addons.minicalendar
+ addon
+ 1.4.0
+
+
+
+
+
+ Vaadin Directory
+ https://maven.vaadin.com/vaadin-addons
+
+
+
spring-boot:run
diff --git a/src/main/java/org/example/CssUtil.java b/src/main/java/org/example/CssUtil.java
new file mode 100644
index 0000000..f860434
--- /dev/null
+++ b/src/main/java/org/example/CssUtil.java
@@ -0,0 +1,13 @@
+package org.example;
+
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.page.Page;
+
+import java.util.Base64;
+
+public class CssUtil {
+ public static void inject(String css) {
+ Page p = UI.getCurrent().getPage();
+ p.addStyleSheet("data:text/css;base64," + Base64.getEncoder().encodeToString(css.getBytes()));
+ }
+}
diff --git a/src/main/java/org/example/views/MinicalendarView.java b/src/main/java/org/example/views/MinicalendarView.java
new file mode 100644
index 0000000..89bcfca
--- /dev/null
+++ b/src/main/java/org/example/views/MinicalendarView.java
@@ -0,0 +1,114 @@
+package org.example.views;
+
+import com.fasterxml.jackson.databind.util.LinkedNode;
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.H5;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.notification.Notification;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.page.Page;
+import com.vaadin.flow.router.Route;
+import org.example.Addon;
+import org.example.CssUtil;
+import org.example.DefaultLayout;
+import org.vaadin.addons.minicalendar.MiniCalendar;
+import org.vaadin.addons.minicalendar.MiniCalendarVariant;
+import org.vaadin.firitin.appframework.MenuItem;
+import org.vaadin.firitin.components.RichText;
+import org.vaadin.firitin.components.orderedlayout.VHorizontalLayout;
+import org.vaadin.tinymce.TinyMce;
+
+import javax.swing.text.Element;
+import java.time.LocalDate;
+import java.util.Base64;
+import java.util.List;
+
+@Route(layout = DefaultLayout.class)
+@MenuItem(title = "MiniCalendar", icon = VaadinIcon.EDIT)
+@Addon("minicalendar-add-on-for-vaadin")
+public class MinicalendarView extends VerticalLayout {
+
+ public MinicalendarView() {
+
+ injectFunkyCss();
+
+ MiniCalendar miniCalendar = new MiniCalendar();
+ miniCalendar.addThemeVariants(MiniCalendarVariant.HOVER_DAYS, MiniCalendarVariant.HIGHLIGHT_WEEKEND);
+
+ miniCalendar.setValue(LocalDate.now());
+
+ var now = LocalDate.now();
+ var funkyDays = List.of(
+ now.plusDays(2),
+ now.plusDays(3),
+ now.plusDays(4),
+ now.plusDays(7),
+ now.plusDays(8),
+ now.plusDays(9),
+ now.plusDays(10)
+ );
+
+ miniCalendar.setDayStyleProvider(day -> {
+ if (funkyDays.contains(day)) {
+ return List.of("funky", "bounce");
+ }
+ return null;
+ });
+
+ miniCalendar.addValueChangeListener(event -> {
+ Notification.show("Value changed to " + event.getValue());
+ });
+
+ miniCalendar.addYearMonthChangeListener(event -> {
+ Notification.show("Value changed to " + event.getValue());
+ });
+
+ add(miniCalendar);
+
+ }
+
+ private void injectFunkyCss() {
+ CssUtil.inject("""
+ @-webkit-keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
+ 40% {-webkit-transform: translateY(-30px);}
+ 60% {-webkit-transform: translateY(-15px);}
+ }
+
+ @keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+ 40% {transform: translateY(-30px);}
+ 60% {transform: translateY(-15px);}
+ }
+
+ .minicalendar .day.funky {
+ color: var(--lumo-primary-contrast-color);
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 0, 0, 1) 0%,
+ rgba(255, 154, 0, 1) 10%,
+ rgba(208, 222, 33, 1) 20%,
+ rgba(79, 220, 74, 1) 30%,
+ rgba(63, 218, 216, 1) 40%,
+ rgba(47, 201, 226, 1) 50%,
+ rgba(28, 127, 238, 1) 60%,
+ rgba(95, 21, 242, 1) 70%,
+ rgba(186, 12, 248, 1) 80%,
+ rgba(251, 7, 217, 1) 90%,
+ rgba(255, 0, 0, 1) 100%
+ );
+ }
+
+ .bounce:hover {
+ -webkit-animation-name: bounce;
+ animation-name: bounce;
+ }
+ """);
+ }
+}