- Enable Edit Event into dialog form ... (and save to the db)

- Event: enabled drag and drop (date)
- Q-Select components in every table field external: Where, Operators, etc...
- CMyEditor: Add HTML Editor to the details field !
- Added button Color for change font color to the text.
- Complete insert Events Site

src/components/CEventsCalendar/CEventsCalendar.scss

@@ -34,7 +34,7 @@ $graytext: #555;
   letter-spacing: 0.03333em;
 
   &__title {
-    color: red;
+    color: white;
     font-weight: 700;
     font-size: 1rem;
     padding-bottom: 10px;
@@ -55,7 +55,7 @@ $graytext: #555;
   }
 
   &__where {
-    margin-top: 10px;
+    margin-top: 5px;
     color: blue;
 
     &-title {
@@ -67,7 +67,7 @@ $graytext: #555;
   }
 
   &__when {
-    margin-top: 10px;
+    margin-top: 5px;
     color: blue;
 
     &-title {
@@ -79,7 +79,7 @@ $graytext: #555;
   }
 
   &__teacher {
-    margin-top: 10px;
+    margin-top: 5px;
     &-title {
       color: $graytext;
     }
@@ -88,6 +88,16 @@ $graytext: #555;
     }
   }
 
+  &__quota {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+
+    }
+  }
+
   &__img {
     width: 100px;
     height: 100px;
@@ -141,6 +151,18 @@ $graytext: #555;
     @media (max-width: 718px) {
       text-align: center;
       display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  &__align_chips {
+    text-align: left;
+    @media (max-width: 718px) {
+      text-align: center;
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
     }
   }
 
@@ -201,10 +223,21 @@ $graytext: #555;
   position: absolute;
   left: 40px;
   @media (max-width: 400px) {
+    left: initial;
     position: initial;
   }
 }
 
+.chipnews {
+
+  position: absolute;
+  right: 0;
+  @media (max-width: 400px) {
+    position: initial;
+    right: initial;
+  }
+}
+
 .windowcol {
   background-color: #ffffff;
           // background: radial-gradient(circle, #ffffff 0%, #94dbfb 100%)
@@ -213,3 +246,18 @@ $graytext: #555;
 .mysel{
   color: white;
 }
+
+.calendar_comp{
+  max-width: 170px;
+  @media (max-width: 400px) {
+    max-width: 400px;
+  }
+}
+
+.myflex{
+  display: flex;
+  flex: 1;
+  @media (max-width: 400px) {
+    flex-flow: column;
+  }
+}