From daabc2659b8df18be4dec6cd1a791307898f0c88 Mon Sep 17 00:00:00 2001
From: Daniel Grams <grams.daniel@gmail.com>
Date: Thu, 30 Dec 2021 14:55:26 +0100
Subject: [PATCH] Custom widgets #345

---
 messages.pot                                  |  49 +-
 migrations/versions/c5fbefbe9881_.py          |  55 ++
 project/api/__init__.py                       |   2 +
 project/api/custom_widget/__init__.py         |   0
 project/api/custom_widget/resources.py        |  84 +++
 project/api/custom_widget/schemas.py          |  82 +++
 project/api/organization/resources.py         |  48 ++
 project/forms/event_date.py                   |   1 +
 project/models.py                             |  15 +
 project/services/admin_unit.py                |  11 +
 project/services/event_search.py              |   3 +
 project/static/vue/common/typeahead.vue.js    |  35 +-
 .../widget-configurator/configurator.vue.js   | 571 ++++++++++++++++++
 .../vue/widget-configurator/list.vue.js       | 170 ++++++
 project/static/widget-loader.js               | 150 +++--
 project/static/widget/calendar.html           | 273 +++++++++
 project/static/widget/search.html             | 525 ++++++++++++++++
 project/templates/layout.html                 |   1 +
 project/templates/layout_vue.html             |  20 +-
 project/templates/manage/custom_widgets.html  |  46 ++
 .../translations/de/LC_MESSAGES/messages.mo   | Bin 33656 -> 33702 bytes
 .../translations/de/LC_MESSAGES/messages.po   |  49 +-
 .../translations/en/LC_MESSAGES/messages.mo   | Bin 3565 -> 3565 bytes
 .../translations/en/LC_MESSAGES/messages.po   |  49 +-
 project/views/manage.py                       |  15 +
 tests/api/test_custom_widget.py               |  55 ++
 tests/api/test_event_date.py                  |   3 +
 tests/api/test_organization.py                |  38 ++
 tests/seeder.py                               |  22 +
 tests/views/test_manage.py                    |   7 +
 30 files changed, 2270 insertions(+), 109 deletions(-)
 create mode 100644 migrations/versions/c5fbefbe9881_.py
 create mode 100644 project/api/custom_widget/__init__.py
 create mode 100644 project/api/custom_widget/resources.py
 create mode 100644 project/api/custom_widget/schemas.py
 create mode 100644 project/static/vue/widget-configurator/configurator.vue.js
 create mode 100644 project/static/vue/widget-configurator/list.vue.js
 create mode 100644 project/static/widget/calendar.html
 create mode 100644 project/static/widget/search.html
 create mode 100644 project/templates/manage/custom_widgets.html
 create mode 100644 tests/api/test_custom_widget.py

diff --git a/messages.pot b/messages.pot
index f93be78..ba28412 100644
--- a/messages.pot
+++ b/messages.pot
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2021-12-08 13:32+0100\n"
+"POT-Creation-Date: 2021-12-30 14:51+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -193,29 +193,29 @@ msgstr ""
 msgid "message"
 msgstr ""
 
-#: project/api/organization/resources.py:364
+#: project/api/organization/resources.py:371
 #: project/views/admin_unit_member_invitation.py:85
 msgid "You have received an invitation"
 msgstr ""
 
-#: project/forms/admin.py:10 project/templates/layout.html:311
+#: project/forms/admin.py:10 project/templates/layout.html:312
 #: project/views/root.py:37
 msgid "Terms of service"
 msgstr ""
 
-#: project/forms/admin.py:11 project/templates/layout.html:315
+#: project/forms/admin.py:11 project/templates/layout.html:316
 #: project/views/root.py:45
 msgid "Legal notice"
 msgstr ""
 
 #: project/forms/admin.py:12 project/templates/_macros.html:1392
-#: project/templates/layout.html:319
+#: project/templates/layout.html:320
 #: project/templates/widget/event_suggestion/create.html:204
 #: project/views/admin_unit.py:73 project/views/root.py:53
 msgid "Contact"
 msgstr ""
 
-#: project/forms/admin.py:13 project/templates/layout.html:323
+#: project/forms/admin.py:13 project/templates/layout.html:324
 #: project/views/root.py:61
 msgid "Privacy"
 msgstr ""
@@ -917,7 +917,7 @@ msgstr ""
 msgid "Distance"
 msgstr ""
 
-#: project/forms/event_date.py:33 project/forms/planing.py:36
+#: project/forms/event_date.py:38 project/forms/planing.py:36
 #: project/templates/widget/event_date/list.html:82
 msgid "Find"
 msgstr ""
@@ -1342,7 +1342,7 @@ msgid "Manage"
 msgstr ""
 
 #: project/templates/home.html:30 project/templates/security/login_user.html:38
-#: project/views/widget.py:158
+#: project/views/widget.py:159
 msgid "Register for free"
 msgstr ""
 
@@ -1366,7 +1366,7 @@ msgstr ""
 msgid "Planing"
 msgstr ""
 
-#: project/templates/layout.html:187 project/templates/layout.html:273
+#: project/templates/layout.html:187 project/templates/layout.html:274
 #: project/templates/oauth2_client/list.html:10
 #: project/templates/oauth2_client/read.html:10
 #: project/templates/oauth2_token/list.html:10 project/templates/profile.html:4
@@ -1468,17 +1468,22 @@ msgstr ""
 msgid "Settings"
 msgstr ""
 
-#: project/templates/layout.html:272 project/templates/manage/reviews.html:10
+#: project/templates/layout.html:272
+#: project/templates/manage/custom_widgets.html:13
+msgid "Custom widgets"
+msgstr ""
+
+#: project/templates/layout.html:273 project/templates/manage/reviews.html:10
 #: project/templates/manage/widgets.html:5
 #: project/templates/manage/widgets.html:9
 msgid "Widgets"
 msgstr ""
 
-#: project/templates/layout.html:283
+#: project/templates/layout.html:284
 msgid "Switch organization"
 msgstr ""
 
-#: project/templates/developer/read.html:4 project/templates/layout.html:333
+#: project/templates/developer/read.html:4 project/templates/layout.html:334
 #: project/templates/profile.html:29
 msgid "Developer"
 msgstr ""
@@ -1945,7 +1950,7 @@ msgstr ""
 msgid "Organization successfully updated"
 msgstr ""
 
-#: project/views/admin.py:68 project/views/manage.py:331
+#: project/views/admin.py:68 project/views/manage.py:346
 msgid "Settings successfully updated"
 msgstr ""
 
@@ -2003,27 +2008,27 @@ msgstr ""
 msgid "Invitation successfully deleted"
 msgstr ""
 
-#: project/views/event.py:179
+#: project/views/event.py:178
 msgid "Event successfully published"
 msgstr ""
 
-#: project/views/event.py:181
+#: project/views/event.py:180
 msgid "Draft successfully saved"
 msgstr ""
 
-#: project/views/event.py:224
+#: project/views/event.py:223
 msgid "Event successfully updated"
 msgstr ""
 
-#: project/views/event.py:250
+#: project/views/event.py:249
 msgid "Event successfully deleted"
 msgstr ""
 
-#: project/views/event.py:409
+#: project/views/event.py:408
 msgid "Referenced event changed"
 msgstr ""
 
-#: project/views/event.py:432
+#: project/views/event.py:431
 msgid "New event report"
 msgstr ""
 
@@ -2179,17 +2184,17 @@ msgid ""
 " the invitation was sent to."
 msgstr ""
 
-#: project/views/widget.py:150
+#: project/views/widget.py:151
 msgid "Thank you so much! The event is being verified."
 msgstr ""
 
-#: project/views/widget.py:154
+#: project/views/widget.py:155
 msgid ""
 "For more options and your own calendar of events, you can register for "
 "free."
 msgstr ""
 
-#: project/views/widget.py:212
+#: project/views/widget.py:221
 msgid "New event review"
 msgstr ""
 
diff --git a/migrations/versions/c5fbefbe9881_.py b/migrations/versions/c5fbefbe9881_.py
new file mode 100644
index 0000000..703eaea
--- /dev/null
+++ b/migrations/versions/c5fbefbe9881_.py
@@ -0,0 +1,55 @@
+"""empty message
+
+Revision ID: c5fbefbe9881
+Revises: eba21922b9b7
+Create Date: 2021-12-29 22:35:29.300556
+
+"""
+import sqlalchemy as sa
+import sqlalchemy_utils
+from alembic import op
+from sqlalchemy.dialects import postgresql
+
+from project import dbtypes
+
+# revision identifiers, used by Alembic.
+revision = "c5fbefbe9881"
+down_revision = "eba21922b9b7"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table(
+        "customwidget",
+        sa.Column("id", sa.Integer(), nullable=False),
+        sa.Column("widget_type", sa.Unicode(length=255), nullable=False),
+        sa.Column("name", sa.Unicode(length=255), nullable=False),
+        sa.Column("admin_unit_id", sa.Integer(), nullable=False),
+        sa.Column("settings", postgresql.JSONB(astext_type=sa.Text()), nullable=True),
+        sa.Column("created_at", sa.DateTime(), nullable=True),
+        sa.Column("updated_at", sa.DateTime(), nullable=True),
+        sa.Column("created_by_id", sa.Integer(), nullable=True),
+        sa.Column("updated_by_id", sa.Integer(), nullable=True),
+        sa.ForeignKeyConstraint(
+            ["admin_unit_id"],
+            ["adminunit.id"],
+        ),
+        sa.ForeignKeyConstraint(
+            ["created_by_id"],
+            ["user.id"],
+        ),
+        sa.ForeignKeyConstraint(
+            ["updated_by_id"],
+            ["user.id"],
+        ),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table("customwidget")
+    # ### end Alembic commands ###
diff --git a/project/api/__init__.py b/project/api/__init__.py
index 14ef9fd..9958acd 100644
--- a/project/api/__init__.py
+++ b/project/api/__init__.py
@@ -125,6 +125,7 @@ scope_list = [
     "organization:read",
     "organization:write",
     "eventlist:write",
+    "customwidget:write",
 ]
 scopes = {k: get_localized_scope(k) for v, k in enumerate(scope_list)}
 
@@ -188,6 +189,7 @@ def add_oauth2_scheme_with_transport(insecure: bool):
 
 marshmallow_plugin.converter.add_attribute_function(enum_to_properties)
 
+import project.api.custom_widget.resources
 import project.api.dump.resources
 import project.api.event.resources
 import project.api.event_category.resources
diff --git a/project/api/custom_widget/__init__.py b/project/api/custom_widget/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/project/api/custom_widget/resources.py b/project/api/custom_widget/resources.py
new file mode 100644
index 0000000..22ddb8a
--- /dev/null
+++ b/project/api/custom_widget/resources.py
@@ -0,0 +1,84 @@
+from flask import make_response
+from flask_apispec import doc, marshal_with, use_kwargs
+
+from project import db
+from project.access import access_or_401, login_api_user_or_401
+from project.api import add_api_resource
+from project.api.custom_widget.schemas import (
+    CustomWidgetPatchRequestSchema,
+    CustomWidgetPostRequestSchema,
+    CustomWidgetSchema,
+)
+from project.api.resources import BaseResource, require_api_access
+from project.models import CustomWidget
+
+
+class CustomWidgetResource(BaseResource):
+    @doc(summary="Get custom widget", tags=["Custom Widgets"])
+    @marshal_with(CustomWidgetSchema)
+    def get(self, id):
+        return CustomWidget.query.get_or_404(id)
+
+    @doc(
+        summary="Update custom widget",
+        tags=["Custom Widgets"],
+        security=[{"oauth2": ["customwidget:write"]}],
+    )
+    @use_kwargs(CustomWidgetPostRequestSchema, location="json", apply=False)
+    @marshal_with(None, 204)
+    @require_api_access("customwidget:write")
+    def put(self, id):
+        login_api_user_or_401()
+        customwidget = CustomWidget.query.get_or_404(id)
+        access_or_401(customwidget.adminunit, "admin_unit:update")
+
+        customwidget = self.update_instance(
+            CustomWidgetPostRequestSchema, instance=customwidget
+        )
+        db.session.commit()
+
+        return make_response("", 204)
+
+    @doc(
+        summary="Patch custom widget",
+        tags=["Custom Widgets"],
+        security=[{"oauth2": ["customwidget:write"]}],
+    )
+    @use_kwargs(CustomWidgetPatchRequestSchema, location="json", apply=False)
+    @marshal_with(None, 204)
+    @require_api_access("customwidget:write")
+    def patch(self, id):
+        login_api_user_or_401()
+        customwidget = CustomWidget.query.get_or_404(id)
+        access_or_401(customwidget.adminunit, "admin_unit:update")
+
+        customwidget = self.update_instance(
+            CustomWidgetPatchRequestSchema, instance=customwidget
+        )
+        db.session.commit()
+
+        return make_response("", 204)
+
+    @doc(
+        summary="Delete custom widget",
+        tags=["Custom Widgets"],
+        security=[{"oauth2": ["customwidget:write"]}],
+    )
+    @marshal_with(None, 204)
+    @require_api_access("customwidget:write")
+    def delete(self, id):
+        login_api_user_or_401()
+        customwidget = CustomWidget.query.get_or_404(id)
+        access_or_401(customwidget.adminunit, "admin_unit:update")
+
+        db.session.delete(customwidget)
+        db.session.commit()
+
+        return make_response("", 204)
+
+
+add_api_resource(
+    CustomWidgetResource,
+    "/custom-widgets/<int:id>",
+    "api_v1_custom_widget",
+)
diff --git a/project/api/custom_widget/schemas.py b/project/api/custom_widget/schemas.py
new file mode 100644
index 0000000..6ba3a97
--- /dev/null
+++ b/project/api/custom_widget/schemas.py
@@ -0,0 +1,82 @@
+from marshmallow import fields, validate
+
+from project.api import marshmallow
+from project.api.organization.schemas import OrganizationRefSchema
+from project.api.schemas import (
+    IdSchemaMixin,
+    PaginationRequestSchema,
+    PaginationResponseSchema,
+    SQLAlchemyBaseSchema,
+    TrackableSchemaMixin,
+    WriteIdSchemaMixin,
+)
+from project.models import CustomWidget
+
+
+class CustomWidgetModelSchema(SQLAlchemyBaseSchema):
+    class Meta:
+        model = CustomWidget
+        load_instance = True
+
+
+class CustomWidgetIdSchema(CustomWidgetModelSchema, IdSchemaMixin):
+    pass
+
+
+class CustomWidgetDumpIdSchema(CustomWidgetModelSchema, IdSchemaMixin):
+    pass
+
+
+class CustomWidgetWriteIdSchema(CustomWidgetModelSchema, WriteIdSchemaMixin):
+    pass
+
+
+class CustomWidgetBaseSchemaMixin(TrackableSchemaMixin):
+    widget_type = marshmallow.auto_field(
+        required=True, validate=validate.Length(min=3, max=255)
+    )
+    name = marshmallow.auto_field(
+        required=True, validate=validate.Length(min=3, max=255)
+    )
+    settings = fields.Dict(keys=fields.Str())
+
+
+class CustomWidgetSchema(CustomWidgetIdSchema, CustomWidgetBaseSchemaMixin):
+    organization = fields.Nested(OrganizationRefSchema, attribute="adminunit")
+
+
+class CustomWidgetDumpSchema(CustomWidgetIdSchema, CustomWidgetBaseSchemaMixin):
+    organization_id = fields.Int(attribute="admin_unit_id")
+
+
+class CustomWidgetRefSchema(CustomWidgetIdSchema):
+    widget_type = marshmallow.auto_field()
+    name = marshmallow.auto_field()
+
+
+class CustomWidgetListRequestSchema(PaginationRequestSchema):
+    name = fields.Str(
+        metadata={"description": "Looks for name."},
+    )
+
+
+class CustomWidgetListResponseSchema(PaginationResponseSchema):
+    items = fields.List(
+        fields.Nested(CustomWidgetRefSchema), metadata={"description": "Custom widgets"}
+    )
+
+
+class CustomWidgetPostRequestSchema(
+    CustomWidgetModelSchema, CustomWidgetBaseSchemaMixin
+):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.make_post_schema()
+
+
+class CustomWidgetPatchRequestSchema(
+    CustomWidgetModelSchema, CustomWidgetBaseSchemaMixin
+):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.make_patch_schema()
diff --git a/project/api/organization/resources.py b/project/api/organization/resources.py
index 59c489f..0e72036 100644
--- a/project/api/organization/resources.py
+++ b/project/api/organization/resources.py
@@ -11,6 +11,12 @@ from project.access import (
     login_api_user_or_401,
 )
 from project.api import add_api_resource
+from project.api.custom_widget.schemas import (
+    CustomWidgetIdSchema,
+    CustomWidgetListRequestSchema,
+    CustomWidgetListResponseSchema,
+    CustomWidgetPostRequestSchema,
+)
 from project.api.event.resources import api_can_read_private_events
 from project.api.event.schemas import (
     EventIdSchema,
@@ -70,6 +76,7 @@ from project.oauth2 import require_oauth
 from project.services.admin_unit import (
     get_admin_unit_invitation_query,
     get_admin_unit_query,
+    get_custom_widget_query,
     get_event_list_query,
     get_event_list_status_query,
     get_organizer_query,
@@ -422,6 +429,42 @@ class OrganizationEventListStatusListResource(BaseResource):
         return pagination
 
 
+class OrganizationCustomWidgetListResource(BaseResource):
+    @doc(
+        summary="List custom widgets of organization",
+        tags=["Organizations", "Custom Widgets"],
+    )
+    @use_kwargs(CustomWidgetListRequestSchema, location=("query"))
+    @marshal_with(CustomWidgetListResponseSchema)
+    def get(self, id, **kwargs):
+        admin_unit = AdminUnit.query.get_or_404(id)
+        name = kwargs["name"] if "name" in kwargs else None
+
+        pagination = get_custom_widget_query(admin_unit.id, name).paginate()
+        return pagination
+
+    @doc(
+        summary="Add new custom widget",
+        tags=["Organizations", "CustomWidgets"],
+        security=[{"oauth2": ["customwidget:write"]}],
+    )
+    @use_kwargs(CustomWidgetPostRequestSchema, location="json", apply=False)
+    @marshal_with(CustomWidgetIdSchema, 201)
+    @require_api_access("customwidget:write")
+    def post(self, id):
+        login_api_user_or_401()
+        admin_unit = get_admin_unit_for_manage_or_404(id)
+        access_or_401(admin_unit, "admin_unit:update")
+
+        custom_widget = self.create_instance(
+            CustomWidgetPostRequestSchema, admin_unit_id=admin_unit.id
+        )
+        db.session.add(custom_widget)
+        db.session.commit()
+
+        return custom_widget, 201
+
+
 add_api_resource(OrganizationResource, "/organizations/<int:id>", "api_v1_organization")
 add_api_resource(
     OrganizationEventDateSearchResource,
@@ -479,3 +522,8 @@ add_api_resource(
     "/organizations/<int:id>/organization-invitations",
     "api_v1_organization_organization_invitation_list",
 )
+add_api_resource(
+    OrganizationCustomWidgetListResource,
+    "/organizations/<int:id>/custom-widgets",
+    "api_v1_organization_custom_widget_list",
+)
diff --git a/project/forms/event_date.py b/project/forms/event_date.py
index c47a3ac..d389885 100644
--- a/project/forms/event_date.py
+++ b/project/forms/event_date.py
@@ -29,6 +29,7 @@ class FindEventDateForm(FlaskForm):
         choices=distance_choices,
     )
     event_list_id = HiddenField(validators=[Optional()])
+    organization_id = HiddenField(validators=[Optional()])
     s_ft = HiddenField(validators=[Optional()])
     s_bg = HiddenField(validators=[Optional()])
     s_pr = HiddenField(validators=[Optional()])
diff --git a/project/models.py b/project/models.py
index 7dfaff3..8c42a3f 100644
--- a/project/models.py
+++ b/project/models.py
@@ -27,6 +27,7 @@ from sqlalchemy import (
     func,
     select,
 )
+from sqlalchemy.dialects.postgresql import JSONB
 from sqlalchemy.event import listens_for
 from sqlalchemy.ext.declarative import declared_attr
 from sqlalchemy.ext.hybrid import hybrid_property
@@ -443,6 +444,11 @@ class AdminUnit(db.Model, TrackableMixin):
         cascade="all, delete-orphan",
         backref=backref("adminunit", lazy=True),
     )
+    custom_widgets = relationship(
+        "CustomWidget",
+        cascade="all, delete-orphan",
+        backref=backref("adminunit", lazy=True),
+    )
     location_id = deferred(db.Column(db.Integer, db.ForeignKey("location.id")))
     location = db.relationship(
         "Location", uselist=False, single_parent=True, cascade="all, delete-orphan"
@@ -1143,6 +1149,15 @@ class Analytics(db.Model):
     created_at = Column(DateTime, default=datetime.datetime.utcnow)
 
 
+class CustomWidget(db.Model, TrackableMixin):
+    __tablename__ = "customwidget"
+    id = Column(Integer(), primary_key=True)
+    widget_type = Column(Unicode(255), nullable=False)
+    name = Column(Unicode(255), nullable=False)
+    admin_unit_id = db.Column(db.Integer, db.ForeignKey("adminunit.id"), nullable=False)
+    settings = Column(JSONB)
+
+
 # Deprecated begin
 class FeaturedEventReviewStatus(IntEnum):
     inbox = 1
diff --git a/project/services/admin_unit.py b/project/services/admin_unit.py
index a3026a8..2eb0f17 100644
--- a/project/services/admin_unit.py
+++ b/project/services/admin_unit.py
@@ -8,6 +8,7 @@ from project.models import (
     AdminUnitMemberInvitation,
     AdminUnitMemberRole,
     AdminUnitRelation,
+    CustomWidget,
     EventEventLists,
     EventList,
     EventOrganizer,
@@ -195,6 +196,16 @@ def get_organizer_query(admin_unit_id, name=None):
     return query.order_by(func.lower(EventOrganizer.name))
 
 
+def get_custom_widget_query(admin_unit_id, name=None):
+    query = CustomWidget.query.filter(CustomWidget.admin_unit_id == admin_unit_id)
+
+    if name:
+        like_name = "%" + name + "%"
+        query = query.filter(CustomWidget.name.ilike(like_name))
+
+    return query.order_by(func.lower(CustomWidget.name))
+
+
 def get_place_query(admin_unit_id, name=None):
     query = EventPlace.query.filter(EventPlace.admin_unit_id == admin_unit_id)
 
diff --git a/project/services/event_search.py b/project/services/event_search.py
index d8ac067..08f9534 100644
--- a/project/services/event_search.py
+++ b/project/services/event_search.py
@@ -127,3 +127,6 @@ class EventSearchParams(object):
 
         if "sort" in request.args:
             self.sort = request.args["sort"]
+
+        if "organization_id" in request.args:
+            self.admin_unit_id = request.args["organization_id"]
diff --git a/project/static/vue/common/typeahead.vue.js b/project/static/vue/common/typeahead.vue.js
index 626c6b7..8692812 100644
--- a/project/static/vue/common/typeahead.vue.js
+++ b/project/static/vue/common/typeahead.vue.js
@@ -5,16 +5,17 @@ const CustomTypeahead = {
             :name="label"
             :detectInput="false"
             ref="validationProvider"
-            rules="required"
+            :rules="rules"
             v-slot="validationContext">
           <b-form-group :label="label">
             <vue-typeahead-bootstrap
+              ref="typeahead"
               v-model="query"
               :data="suggestions"
               :minMatchingChars="1"
               :disableSort="true"
               :showAllResults="true"
-              :placeholder="$t('shared.autocomplete.instruction')"
+              :placeholder="$attrs.placeholder != null ? $attrs.placeholder : $t('shared.autocomplete.instruction')"
               :inputClass="getInputClass(validationContext)"
               @hit="selected = $event"
               @input="onInput"
@@ -31,12 +32,27 @@ const CustomTypeahead = {
     value: {
       type: null
     },
+    rules: {
+      type: [Object, String],
+      default: "required"
+    },
     fetchURL: {
       type: String
     },
     labelKey: {
       type: String
     },
+    labelValue: {
+      type: String
+    },
+    validClass: {
+      type: String,
+      default: "is-valid"
+    },
+    invalidClass: {
+      type: String,
+      default: "is-invalid"
+    },
   },
   data: () => ({
     query: '',
@@ -45,7 +61,7 @@ const CustomTypeahead = {
   }),
   computed: {
     label() {
-      return this.$t(this.labelKey)
+      return this.labelValue != null ? this.labelValue : this.$t(this.labelKey);
     },
   },
   methods: {
@@ -57,7 +73,7 @@ const CustomTypeahead = {
         return "";
       }
 
-      return valid ? "is-valid" : "is-invalid";
+      return valid ? this.validClass : this.invalidClass;
     },
     fetchData(query) {
       const vm = this
@@ -74,7 +90,16 @@ const CustomTypeahead = {
     },
   },
   mounted() {
-    this.$refs.validationProvider.syncValue(this.selected)
+    this.$refs.validationProvider.syncValue(this.selected);
+
+    this.$watch(
+      "$refs.typeahead.isFocused",
+      (new_value, old_value) => {
+         if (new_value && this.$refs.typeahead.showOnFocus && this.query == "") {
+            this.fetchData(this.query);
+         }
+      }
+    );
   },
   watch: {
     selected(newVal) {
diff --git a/project/static/vue/widget-configurator/configurator.vue.js b/project/static/vue/widget-configurator/configurator.vue.js
new file mode 100644
index 0000000..ae9cac8
--- /dev/null
+++ b/project/static/vue/widget-configurator/configurator.vue.js
@@ -0,0 +1,571 @@
+const WidgetConfigurator = {
+  template: `
+    <b-container fluid class="h-100 d-flex flex-column">
+      <b-row class="flex-shrink-0 bg-light" align-v="center">
+        <b-col cols="auto">
+          <h1 class="my-3">{{ $t("comp.title") }}</h1>
+        </b-col>
+        <b-col cols="auto">
+          <b-overlay :show="isLoading">
+            <b-form inline>
+              <b-input-group :prepend="$t('shared.models.customWidget.widgetType')" class="mb-2 mr-sm-2 mb-sm-0">
+                <b-form-select v-model="widgetType" :options="widgetTypes"></b-form-select>
+              </b-input-group>
+              <b-input-group :prepend="$t('shared.models.customWidget.name')" class="mb-2 mr-sm-2 mb-sm-0">
+                <b-form-input v-model="name"></b-form-input>
+              </b-input-group>
+              <b-button variant="secondary" @click="goBack" v-bind:disabled="isSubmitting" class="mb-2 mr-sm-2 mb-sm-0">{{ $t("shared.cancel") }}</b-button>
+              <b-button variant="primary" @click.prevent="submitForm()" v-bind:disabled="isSubmitting" class="mb-2 mb-sm-0">
+                  <b-spinner small v-if="isSubmitting"></b-spinner>
+                  {{ $t("shared.save") }}
+              </b-button>
+            </b-form inline>
+          </b-overlay>
+        </b-col>
+      </b-row>
+      <b-row class="flex-fill" style="min-height:0;">
+        <b-col sm="3" class="mh-100 py-3" style="overflow-y: scroll;">
+        <b-overlay :show="isLoading">
+          <b-card no-body>
+            <b-tabs card>
+              <b-tab :title="$t('comp.tabSettings')" active>
+                <div v-if="widgetType == 'search'">
+                  <custom-typeahead
+                    v-model="searchEventList"
+                    rules=""
+                    validClass=""
+                    :fetchURL="eventListFetchUrl"
+                    :labelValue="$t('comp.search.eventListId')"
+                    :showOnFocus="true"
+                    :serializer="i => i.name"
+                  />
+                  <b-form-group :label="$t('comp.search.layout')">
+                    <b-form-select v-model="form.search.layout" :options="searchLayouts"></b-form-select>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.search.eventsPerPage')">
+                    <b-form-input v-model="form.search.eventsPerPage"></b-form-input>
+                  </b-form-group>
+
+                  <b-form-group :label="$t('comp.search.view')">
+                    <b-form-checkbox v-model="form.search.showFilter">
+                      {{ $t("comp.search.showFilter") }}
+                    </b-form-checkbox>
+                    <b-form-checkbox v-model="form.search.showPagination">
+                      {{ $t("comp.search.pagination") }}
+                    </b-form-checkbox>
+                    <b-form-checkbox v-model="form.search.showOvedaLink">
+                      {{ $t("comp.search.showOvedaLink") }}
+                    </b-form-checkbox>
+                    <b-form-checkbox v-model="form.search.showPrintButton">
+                      {{ $t("comp.search.printButton") }}
+                    </b-form-checkbox>
+                  </b-form-group>
+
+                  <b-form-group :label="$t('comp.search.iFrameMinHeight')">
+                    <b-form-input v-model="form.search.iFrameMinHeight" debounce="500"></b-form-input>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.search.iFrameMaxHeight')">
+                    <b-form-input v-model="form.search.iFrameMaxHeight" debounce="500"></b-form-input>
+                  </b-form-group>
+                </div>
+
+                <div v-if="widgetType == 'calendar'">
+                  <b-form-group :label="$t('comp.calendar.calendarType')">
+                    <b-form-select v-model="form.calendar.calendarType" :options="calendarTypes"></b-form-select>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.calendar.iFrameHeight')">
+                    <b-form-input v-model="form.calendar.iFrameHeight" debounce="500"></b-form-input>
+                  </b-form-group>
+                </div>
+              </b-tab>
+              <b-tab :title="$t('comp.tabStyles')">
+                <div v-if="widgetType == 'search'">
+                  <b-form-group :label="$t('comp.generic.fontFamily')">
+                    <b-form-input v-model="form.search.fontFamily"></b-form-input>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.generic.padding')">
+                    <b-form-input v-model="form.search.padding"></b-form-input>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.generic.backgroundColor')">
+                    <b-form-input v-model="form.search.background" type="color"></b-form-input>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.generic.textColor')">
+                    <b-form-input v-model="form.search.textColor" type="color"></b-form-input>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.generic.linkColor')">
+                    <b-form-input v-model="form.search.linkColor" type="color"></b-form-input>
+                  </b-form-group>
+
+                  <template v-if="form.search.layout == 'card'">
+                    <b-form-group :label="$t('comp.search.event') + ' ' + $t('comp.generic.backgroundColor')">
+                      <b-form-input v-model="form.search.eventBackgroundColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.event') + ' ' + $t('comp.generic.borderColor')">
+                      <b-form-input v-model="form.search.eventBorderColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.eventName') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.eventNameTextColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.eventDate') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.eventDateTextColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.eventInfo') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.eventInfoTextColor" type="color"></b-form-input>
+                    </b-form-group>
+                  </template>
+
+                  <b-form-group :label="$t('comp.search.eventBadgeWarning') + ' ' + $t('comp.generic.backgroundColor')">
+                    <b-form-input v-model="form.search.eventBadgeWarningBackgroundColor" type="color"></b-form-input>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.search.eventBadgeWarning') + ' ' + $t('comp.generic.textColor')">
+                    <b-form-input v-model="form.search.eventBadgeWarningTextColor" type="color"></b-form-input>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.search.eventBadgeInfo') + ' ' + $t('comp.generic.backgroundColor')">
+                    <b-form-input v-model="form.search.eventBadgeInfoBackgroundColor" type="color"></b-form-input>
+                  </b-form-group>
+                  <b-form-group :label="$t('comp.search.eventBadgeInfo') + ' ' + $t('comp.generic.textColor')">
+                    <b-form-input v-model="form.search.eventBadgeInfoTextColor" type="color"></b-form-input>
+                  </b-form-group>
+
+                  <template v-if="form.search.showFilter">
+                    <b-form-group :label="$t('comp.search.filterLabel') + ' ' + $t('comp.generic.backgroundColor')">
+                      <b-form-input v-model="form.search.filterLabelBackgroundColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.filterLabel') + ' ' + $t('comp.generic.borderColor')">
+                      <b-form-input v-model="form.search.filterLabelBorderColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.filterLabel') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.filterLabelTextColor" type="color"></b-form-input>
+                    </b-form-group>
+
+                    <b-form-group :label="$t('comp.search.filterInput') + ' ' + $t('comp.generic.backgroundColor')">
+                      <b-form-input v-model="form.search.filterInputBackgroundColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.filterInput') + ' ' + $t('comp.generic.borderColor')">
+                      <b-form-input v-model="form.search.filterInputBorderColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.filterInput') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.filterInputTextColor" type="color"></b-form-input>
+                    </b-form-group>
+
+                    <b-form-group :label="$t('comp.search.filterButton') + ' ' + $t('comp.generic.backgroundColor')">
+                      <b-form-input v-model="form.search.buttonBackgroundColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.filterButton') + ' ' + $t('comp.generic.borderColor')">
+                      <b-form-input v-model="form.search.buttonBorderColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.filterButton') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.buttonTextColor" type="color"></b-form-input>
+                    </b-form-group>
+                  </template>
+
+                  <template v-if="form.search.showPagination">
+                    <b-form-group :label="$t('comp.search.pagination') + ' ' + $t('comp.generic.borderColor')">
+                      <b-form-input v-model="form.search.pagingBorderColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.pagination') + ' ' + $t('comp.generic.color')">
+                      <b-form-input v-model="form.search.pagingColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.pagination') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.pagingTextColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.pagination') + ' ' + $t('comp.generic.disabled') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.pagingDisabledTextColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.pagination') + ' ' + $t('comp.generic.active') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.pagingActiveTextColor" type="color"></b-form-input>
+                    </b-form-group>
+                  </template>
+
+                  <template v-if="form.search.showPrintButton">
+                    <b-form-group :label="$t('comp.search.printButton') + ' ' + $t('comp.generic.backgroundColor')">
+                      <b-form-input v-model="form.search.printButtonBackgroundColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.printButton') + ' ' + $t('comp.generic.borderColor')">
+                      <b-form-input v-model="form.search.printButtonBorderColor" type="color"></b-form-input>
+                    </b-form-group>
+                    <b-form-group :label="$t('comp.search.printButton') + ' ' + $t('comp.generic.textColor')">
+                      <b-form-input v-model="form.search.printButtonTextColor" type="color"></b-form-input>
+                    </b-form-group>
+                  </template>
+                </div>
+
+                <div v-if="widgetType == 'calendar'">
+                  <b-form-group :label="$t('comp.calendar.eventBackgroundColor')">
+                    <b-form-input v-model="form.calendar.eventBackgroundColor" type="color"></b-form-input>
+                  </b-form-group>
+                </div>
+              </b-tab>
+            </b-tabs>
+          </b-card>
+          </b-overlay>
+        </b-col>
+        <b-col sm="9" class="mh-100 py-3" style="overflow-y: scroll;">
+          <b-container fluid class="h-100 d-flex flex-column px-0">
+            <b-row class="flex-shrink-0">
+              <b-col class="my-2">
+                <b-form inline class="float-sm-right">
+                  <b-form-input
+                    v-model="previewBackgroundColor"
+                    type="color"
+                    class="mr-sm-2"
+                    style="min-width:40px;"></b-form-input>
+                  <b-form-radio-group
+                    v-model="previewSize"
+                    :options="previewSizes"
+                    size="sm"
+                    button-variant="outline-secondary"
+                    buttons
+                  ></b-form-radio-group>
+                </b-form>
+              </b-col>
+            </b-row>
+            <b-row class="flex-fill" style="min-height:0;">
+              <b-col class="mh-100" style="overflow-y: scroll;">
+                <div ref="previewPage" class="h-100 border p-3 m-auto" :style="{width: previewSize, 'background-color': previewBackgroundColor + '!important', 'overflow-y': 'scroll'}">
+                  <div class="mb-2 font-weight-bold">{{ $t("comp.preview") }}</div>
+                  <iframe v-if="iFrameActive" :key="iFrameCounter" class="preview_iframe" ref="previewIframe" :src="iFrameSource" style="width:100%; height:300px;" frameborder="0"></iframe>
+                </div>
+              </b-col>
+            </b-row>
+          </b-container>
+        </b-col>
+      </b-row>
+    </b-container>
+    `,
+  i18n: {
+    messages: {
+      en: {
+        comp: {
+          title: "Widget configurator",
+          successMessage: "Widget successfully saved",
+          preview: "Preview",
+          tabSettings: "Serrings",
+          tabStyles: "Styles",
+          generic: {
+            fontFamily: "Font family",
+            padding: "Padding",
+            backgroundColor: "Background color",
+            textColor: "Text color",
+            linkColor: "Link color",
+            borderColor: "Border color",
+            color: "Color",
+            disabled: "Deactivated",
+            active: "Activ",
+          },
+          calendar: {
+            iFrameHeight: "Height",
+            eventBackgroundColor: "Event color",
+            calendarType: "Calendar type",
+          },
+          search: {
+            iFrameMinHeight: "Min. Height",
+            iFrameMaxHeight: "Max. Height",
+            eventListId: "Event list",
+            view: "Display",
+            showFilter: "Filter",
+            showOvedaLink: "Oveda link",
+            layout: "Layout",
+            eventsPerPage: "Events per page",
+            event: "Event",
+            eventName: "Event name",
+            eventDate: "Event datum",
+            eventInfo: "Event info",
+            eventBadgeWarning: "Event warning badge",
+            eventBadgeInfo: "Event info badge",
+            filterLabel: "Filter label",
+            filterInput: "Filter input",
+            filterButton: "Filter button",
+            pagination: "Pagination",
+            printButton: "Print button",
+          },
+        },
+      },
+      de: {
+        comp: {
+          title: "Widget Konfigurator",
+          successMessage: "Widget erfolgreich gespeichert",
+          preview: "Vorschau",
+          tabSettings: "Einstellungen",
+          tabStyles: "Styles",
+          generic: {
+            fontFamily: "Schriftart",
+            padding: "Abstand",
+            backgroundColor: "Hintergrundfarbe",
+            textColor: "Textfarbe",
+            linkColor: "Link-Farbe",
+            borderColor: "Rahmen-Farbe",
+            color: "Farbe",
+            disabled: "Deaktiviert",
+            active: "Aktiv",
+          },
+          calendar: {
+            iFrameHeight: "Höhe",
+            eventBackgroundColor: "Event Farbe",
+            calendarType: "Kalender Typ",
+          },
+          search: {
+            iFrameMinHeight: "Min. Höhe",
+            iFrameMaxHeight: "Max. Höhe",
+            eventListId: "Veranstaltungsliste",
+            view: "Anzeige",
+            showFilter: "Filter",
+            showOvedaLink: "Oveda-Link",
+            layout: "Layout",
+            eventsPerPage: "Events pro Seite",
+            event: "Event",
+            eventName: "Event-Name",
+            eventDate: "Event-Datum",
+            eventInfo: "Event-Info",
+            eventBadgeWarning: "Event Warnungszeichen",
+            eventBadgeInfo: "Event Infozeichen",
+            filterLabel: "Filter-Label",
+            filterInput: "Filter-Eingabe",
+            filterButton: "Filter-Button",
+            pagination: "Paginierung",
+            printButton: "Drucken-Button",
+          },
+        },
+      },
+    },
+  },
+  data: () => ({
+    iFrameActive: true,
+    iFrameCounter: 0,
+    previewSize: '100%',
+    previewSizes: [
+      { text: 'Desktop', value: '100%' },
+      { text: 'Tablet', value: '768px' },
+      { text: 'Mobile', value: '400px' },
+    ],
+    previewBackgroundColor: '#f8f9fa',
+    isLoading: false,
+    isSubmitting: false,
+    customWidget: null,
+    form: {
+      search: {
+        layout: "card",
+        iFrameMinHeight: 400,
+        iFrameMaxHeight: "Infinity",
+        iFrameAutoResize: true,
+        organizationId: null,
+        eventListId: null,
+        eventsPerPage: 10,
+        showFilter: true,
+        showPagination: true,
+        showPrintButton: false,
+        showOvedaLink: true,
+        fontFamily: "",
+        background: "#ffffff",
+        textColor: "#212529",
+        padding: "1rem",
+        linkColor: "#007bff",
+        buttonBackgroundColor: "#007bff",
+        buttonBorderColor: "#007bff",
+        buttonTextColor: "#ffffff",
+        printButtonBackgroundColor: "#6c757d",
+        printButtonBorderColor: "#6c757d",
+        printButtonTextColor: "#ffffff",
+        filterLabelBackgroundColor: "#e9ecef",
+        filterLabelBorderColor: "#ced4da",
+        filterLabelTextColor: "#495057",
+        filterInputBackgroundColor: "#ffffff",
+        filterInputBorderColor: "#ced4da",
+        filterInputTextColor: "#495057",
+        eventBackgroundColor: "#ffffff",
+        eventBorderColor: "#00000020",
+        eventNameTextColor: "#000000",
+        eventDateTextColor: "#212529",
+        eventInfoTextColor: "#6c757d",
+        pagingBorderColor: "#dee2e6",
+        pagingColor: "#007bff",
+        pagingTextColor: "#007bff",
+        pagingActiveTextColor: "#ffffff",
+        pagingDisabledTextColor: "#6c757d",
+        eventBadgeWarningBackgroundColor: "#ffc107",
+        eventBadgeWarningTextColor: "#212529",
+        eventBadgeInfoBackgroundColor: "#17a2b8",
+        eventBadgeInfoTextColor: "#ffffff",
+      },
+      calendar: {
+        iFrameHeight: 600,
+        iFrameAutoResize: false,
+        organizationId: null,
+        eventListId: null,
+        calendarType: "week",
+        eventBackgroundColor: "#007bff",
+      }
+    },
+    calendarTypes: [
+      { value: "week", text: 'Woche' },
+      { value: 'month', text: 'Monat' },
+    ],
+    searchLayouts: [
+      { value: "card", text: 'Karten' },
+      { value: 'text', text: 'Text' },
+    ],
+    widgetType: "search",
+    widgetTypes: [],
+    name: "Widget",
+    searchEventList: null,
+  }),
+  computed: {
+    iFrameSource() {
+      return `${window.location.origin}/static/widget/${this.widgetType}.html`;
+    },
+    organizationId() {
+      return this.$route.params.organization_id;
+    },
+    customWidgetId() {
+      return this.$route.params.custom_widget_id;
+    },
+    settings() {
+      return this.form[this.widgetType];
+    },
+    iFrameResizerOptions() {
+      return {
+        autoResize: this.settings.iFrameAutoResize,
+        minHeight: this.settings.iFrameMinHeight != null ? this.settings.iFrameMinHeight : this.settings.iFrameHeight,
+        maxHeight: this.settings.iFrameMaxHeight != null ? this.settings.iFrameMaxHeight : this.settings.iFrameHeight,
+        scrolling: "omit",
+      };
+    },
+    eventListFetchUrl() {
+      return `/api/v1/organizations/${this.organizationId}/event-lists?name={query}`;
+    },
+  },
+  mounted() {
+    this.isLoading = false;
+    this.customWidget = null;
+    this.widgetTypes = [
+      { value: "search", text: this.$t("shared.models.customWidget.widgetTypeSearch") },
+      { value: "calendar", text: this.$t("shared.models.customWidget.widgetTypeCalendar") },
+    ]
+    this.form.search.organizationId = this.organizationId;
+    this.form.calendar.organizationId = this.organizationId;
+
+    if (this.customWidgetId == null) {
+      this.initResizer();
+    } else {
+      this.loadFormData();
+    }
+  },
+  watch: {
+    settings: {
+        handler: function (val, oldVal) {
+          this.updatePreview();
+        },
+        deep: true
+    },
+    iFrameResizerOptions: {
+      handler: function (val, oldVal) {
+        this.reloadIframe();
+      },
+      deep: true
+    },
+    searchEventList: function(val) {
+      this.form.search.eventListId = val != null ? val.id : null;
+    },
+    previewSize: function(val) {
+      this.resizePreview();
+    }
+  },
+  methods: {
+    reloadIframe() {
+      this.iFrameActive = false;
+      this.iFrameCounter++;
+      this.iFrameActive = true;
+      this.initResizer();
+    },
+    initResizer() {
+      const vm = this;
+      Vue.nextTick(function () {
+        iFrameResize({
+          autoResize: vm.iFrameResizerOptions.autoResize,
+          minHeight: vm.iFrameResizerOptions.minHeight,
+          maxHeight: vm.iFrameResizerOptions.maxHeight,
+          scrolling: vm.iFrameResizerOptions.scrolling,
+          onMessage: function(m) {},
+          onInit: function() { vm.updatePreview() },
+        },
+        '.preview_iframe');
+      });
+    },
+    updatePreview() {
+      const resizer = this.$refs.previewIframe.iFrameResizer;
+
+      if (resizer === undefined) {
+        return;
+      }
+
+      resizer.sendMessage({'type': 'OVEDA_WIDGET_SETTINGS_UPDATE_EVENT', 'data': this.settings});
+    },
+    resizePreview() {
+      const resizer = this.$refs.previewIframe.iFrameResizer;
+
+      if (resizer === undefined) {
+        return;
+      }
+
+      resizer.resize();
+    },
+    loadFormData() {
+      axios
+        .get(`/api/v1/custom-widgets/${this.customWidgetId}`, {
+          withCredentials: true,
+          handleLoading: this.handleLoading,
+        })
+        .then((response) => {
+          this.customWidget = response.data;
+          this.widgetType = this.customWidget.widget_type;
+          this.name = this.customWidget.name;
+
+          for (var key in this.customWidget.settings) {
+              this.settings[key] = this.customWidget.settings[key];
+          }
+        });
+    },
+    handleLoading(isLoading) {
+      this.isLoading = isLoading;
+    },
+    submitForm() {
+      let data = {
+          'widget_type': this.widgetType,
+          'name': this.name,
+          'settings': this.settings,
+      };
+
+      if (this.customWidgetId == null) {
+        axios
+        .post(`/api/v1/organizations/${this.organizationId}/custom-widgets`,
+          data,
+          {
+            withCredentials: true,
+            handleLoading: this.handleSubmitting,
+          })
+        .then(() => {
+          this.$root.makeSuccessToast(this.$t("comp.successMessage"))
+          this.goBack()
+        })
+      } else {
+        axios
+        .put(`/api/v1/custom-widgets/${this.customWidgetId}`,
+          data,
+          {
+            withCredentials: true,
+            handleLoading: this.handleSubmitting,
+          })
+        .then(() => {
+          this.$root.makeSuccessToast(this.$t("comp.successMessage"))
+          this.goBack()
+        })
+      }
+    },
+    handleSubmitting(isLoading) {
+        this.isSubmitting = isLoading;
+    },
+    goBack() {
+      window.location.href = `/manage/admin_unit/${this.organizationId}/custom-widgets`;
+    },
+  },
+};
diff --git a/project/static/vue/widget-configurator/list.vue.js b/project/static/vue/widget-configurator/list.vue.js
new file mode 100644
index 0000000..e47a195
--- /dev/null
+++ b/project/static/vue/widget-configurator/list.vue.js
@@ -0,0 +1,170 @@
+const WidgetConfiguratorList = {
+  template: `
+    <div>
+        <h1>{{ $t("shared.models.customWidget.listName") }}</h1>
+
+        <div class="my-4">
+            <b-button variant="outline-secondary" @click.prevent="createItem()"><i class="fa fa-plus"></i> {{ $t("comp.addTitle") }}</b-button>
+        </div>
+
+        <div class="alert alert-danger" role="alert" v-if="errorMessage">
+            {{ errorMessage }}
+        </div>
+
+        <b-modal id="custom-widget-installation-modal" title="Installation" size="lg" ok-only>
+          <p>Kopiere den unten stehenden Code und füge ihn auf deiner Website ein.</p>
+          <p>Füge den folgenden Code im <code>&lt;head&gt;</code> der Seite ein.</p>
+
+          <b-form-textarea rows="3" max-rows="8" size="sm" disabled class="text-monospace" style="font-size: 0.7rem;" v-model="installationHeader"></b-form-textarea>
+          <p class="mt-3">Füge den folgenden Code an der Stelle im <code>&lt;body&gt;</code> der Seite ein, wo das Widget dargestellt werden soll.</p>
+          <b-form-textarea rows="1" max-rows="8" size="sm" disabled class="text-monospace" style="font-size: 0.7rem;" v-model="installationBody"></b-form-textarea>
+        </b-modal>
+
+        <b-table
+          ref="table"
+          id="main-table"
+          :fields="fields"
+          :items="loadTableData"
+          :current-page="currentPage"
+          :per-page="perPage"
+          primary-key="id"
+          thead-class="d-none"
+          outlined
+          hover
+          responsive
+          show-empty
+          :empty-text="$t('shared.emptyData')"
+          style="min-height:120px"
+        >
+          <template #cell(name)="data">
+            <b-dropdown :id="'item-dropdown-' + data.item.id" :text="data.value" variant="link" toggle-class="m-0 p-0">
+              <b-dropdown-item @click.prevent="installItem(data.item.id)">{{ $t("comp.installation") }}&hellip;</b-dropdown-item>
+              <b-dropdown-item @click.prevent="editItem(data.item.id)">{{ $t("shared.edit") }}&hellip;</b-dropdown-item>
+              <b-dropdown-item @click.prevent="deleteItem(data.item.id)">{{ $t("shared.delete") }}&hellip;</b-dropdown-item>
+            </b-dropdown>
+          </template>
+          <template #cell(widget_type)="data">
+            {{ widgetTypes[data.value] }}
+          </template>
+        </b-table>
+        <b-pagination v-if="totalRows > 0"
+          v-model="currentPage"
+          :total-rows="totalRows"
+          :per-page="perPage"
+          aria-controls="main-table"
+        ></b-pagination>
+    </div>
+    `,
+  i18n: {
+    messages: {
+      en: {
+        comp: {
+          addTitle: "Add widget",
+          installation: "Installation",
+          deletedMessage: "Widget successfully deleted",
+          deleteConfirmation: "Do you really want to delete the widget?",
+        },
+      },
+      de: {
+        comp: {
+          addTitle: "Widget hinzufügen",
+          installation: "Installation",
+          deletedMessage: "Widget erfolgreich gelöscht",
+          deleteConfirmation: "Möchtest du das Widget wirklich löschen?",
+        },
+      },
+    },
+  },
+  data: () => ({
+    errorMessage: null,
+    fields: [
+      {
+        key: "name",
+        label: i18n.t("shared.models.customWidget.name"),
+      },
+      {
+        key: "widget_type",
+        label: i18n.t("shared.models.customWidget.widgetType"),
+      },
+    ],
+    totalRows: 0,
+    currentPage: 1,
+    perPage: 10,
+    searchResult: {
+      items: [],
+    },
+    widgetTypes: {
+      "search": "Search",
+      "calendar": "Calendar",
+    },
+    installationWidgetId: 0,
+  }),
+  computed: {
+    organizationId() {
+      return this.$route.params.organization_id;
+    },
+    installationHeader() {
+      return "<!-- Oveda Widget -->\n<script>(function(w,d,s,o,f,js,fjs){w['OvedaWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);}(window,document,'script','oveda','" + window.location.origin  + "/static/widget-loader.js'));</script>\n<!-- End Oveda Widget -->";
+    },
+    installationBody() {
+      return '<div class="oveda-widget" data-widget-id="' + this.installationWidgetId + '"></div>';
+    }
+  },
+  mounted() {
+    this.widgetTypes["search"] = this.$t("shared.models.customWidget.widgetTypeSearch");
+    this.widgetTypes["calendar"] = this.$t("shared.models.customWidget.widgetTypeCalendar");
+  },
+  methods: {
+    loadTableData(ctx, callback) {
+      const vm = this;
+      axios
+        .get(`/api/v1/organizations/${this.organizationId}/custom-widgets`, {
+          params: {
+            page: ctx.currentPage,
+            per_page: ctx.perPage,
+          },
+          withCredentials: true,
+          handler: this,
+        })
+        .then((response) => {
+          vm.totalRows = response.data.total;
+          callback(response.data.items);
+        })
+        .catch(() => {
+          callback([]);
+        });
+      return null;
+    },
+    refreshTableData() {
+      this.$refs.table.refresh();
+    },
+    handleRequestStart() {
+      this.errorMessage = null;
+    },
+    handleRequestError(error, message) {
+      this.errorMessage = message;
+    },
+    createItem() {
+      window.location.href = `/manage/admin_unit/${this.organizationId}/custom-widgets/create`;
+    },
+    editItem(id) {
+      window.location.href = `/manage/admin_unit/${this.organizationId}/custom-widgets/${id}/update`;
+    },
+    deleteItem(id) {
+      if (confirm(this.$t("comp.deleteConfirmation"))) {
+        axios
+          .delete(`/api/v1/custom-widgets/${id}`, {
+            withCredentials: true,
+          })
+          .then(() => {
+            this.$root.makeSuccessToast(this.$t("comp.deletedMessage"));
+            this.refreshTableData();
+          });
+      }
+    },
+    installItem(id) {
+      this.installationWidgetId = id;
+      this.$bvModal.show("custom-widget-installation-modal");
+    },
+  },
+};
diff --git a/project/static/widget-loader.js b/project/static/widget-loader.js
index bb882e2..c8cff12 100644
--- a/project/static/widget-loader.js
+++ b/project/static/widget-loader.js
@@ -3,7 +3,7 @@
     var script = document.currentScript || document.querySelector('script[src*="widget-loader.js"]')
     var baseUrl = script.src.replace("/static/widget-loader.js", "");
 
-    var iFrameElements = [];
+    var containers = [];
     var needsResizer = false;
 
     w.onload = function() {
@@ -17,30 +17,69 @@
     function initWidgets() {
       var elements = d.getElementsByClassName("oveda-widget");
       for (var i = 0; i < elements.length; i++) {
-         initIframeWidget(elements.item(i));
+         initIframeWidget(elements.item(i), i);
       }
     }
 
-    function initIframeWidget(element) {
-      var shortName = getWidgetData(element, 'short-name');
-      var width = getWidgetData(element, 'width', '100%');
-      var height = getWidgetData(element, 'height', '400px');
-      var resize = getWidgetBoolData(element, 'resize', false);
-      var googleTagManager = getWidgetBoolData(element, 'google-tag-manager', false);
+    function initIframeWidget(element, index) {
+      var customId = getWidgetData(element, 'id');
+      var customWidgetData = null;
+      var src = null;
+      var resize = true;
+      var minHeight = "400";
+      var maxHeight = "Infinity";
+      var width = "100%";
+      var googleTagManager = false;
 
-      var style = "border: none; width:" + width + ";height:" + height + ";";
-      if (resize) {
+      if (customId != null) {
+        var url = baseUrl + "/api/v1/custom-widgets/" + customId;
+
+        customWidgetData = loadJSON(url);
+        var settings = customWidgetData.settings;
+        src = baseUrl + "/static/widget/" + customWidgetData.widget_type + ".html";
+
+        if (settings.hasOwnProperty('iFrameAutoResize') && settings.iFrameAutoResize != null) {
+          resize = settings.iFrameAutoResize;
+        }
+
+        if (settings.hasOwnProperty('iFrameHeight') && settings.iFrameHeight != null) {
+          minHeight = settings.iFrameHeight;
+          maxHeight = settings.iFrameHeight;
+        }
+
+        if (settings.hasOwnProperty('iFrameMinHeight') && settings.iFrameMinHeight != null) {
+          minHeight = settings.iFrameMinHeight;
+        }
+
+        if (settings.hasOwnProperty('iFrameMaxHeight') && settings.iFrameMaxHeight != null) {
+          maxHeight = settings.iFrameMaxHeight;
+        }
+
+        if (settings.hasOwnProperty('googleTagManager') && settings.googleTagManager != null) {
+          googleTagManager = settings.googleTagManager;
+        }
+      } else {
+        width = getWidgetData(element, 'width', '100%');
+        minHeight = getWidgetData(element, 'height', '400px');
+        resize = getWidgetBoolData(element, 'resize', false);
+        googleTagManager = getWidgetBoolData(element, 'google-tag-manager', false);
+
+        var shortName = getWidgetData(element, 'short-name');
+        var src = baseUrl + "/" + shortName + "/widget/eventdates?";
+        src = addParamToQuery(element, src, 'event-list', 'event_list_id');
+        src = addParamToQuery(element, src, 'font', 's_ft');
+        src = addParamToQuery(element, src, 'background', 's_bg');
+        src = addParamToQuery(element, src, 'primary', 's_pr');
+        src = addParamToQuery(element, src, 'link', 's_li');
+      }
+
+      var style = "border: none; width:" + width + ";height:" + minHeight + ";";
+      if (resize || customWidgetData != null) {
         style += "min-width:100%;max-width:100%;";
       }
 
-      var src = baseUrl + "/" + shortName + "/widget/eventdates?";
-      src = addParamToQuery(element, src, 'event-list', 'event_list_id');
-      src = addParamToQuery(element, src, 'font', 's_ft');
-      src = addParamToQuery(element, src, 'background', 's_bg');
-      src = addParamToQuery(element, src, 'primary', 's_pr');
-      src = addParamToQuery(element, src, 'link', 's_li');
-
       var iFrame = d.createElement("iframe");
+      iFrame.id = "oveda-widget-iframe-" + index;
       iFrame.class = "oveda-widget-iframe";
       iFrame.src = src;
       iFrame.style = style;
@@ -48,11 +87,20 @@
       iFrame.allowtransparency = "true";
       element.appendChild(iFrame);
 
-      if (resize || googleTagManager) {
+      if (resize || googleTagManager || customWidgetData != null) {
         needsResizer = true;
       }
 
-      iFrameElements.push(element);
+      var container = {
+        element: element,
+        iFrame: iFrame,
+        minHeight: minHeight,
+        maxHeight: maxHeight,
+        resize: resize,
+        googleTagManager: googleTagManager,
+        customWidgetData: customWidgetData
+      };
+      containers.push(container);
     }
 
     function addParamToQuery(element, url, attr, param)
@@ -85,29 +133,40 @@
     }
 
     function startIframeResizer() {
-      for (var i = 0; i < iFrameElements.length; i++) {
-        var element = iFrameElements[i];
-        var iFrame = element.getElementsByTagName("iframe")[0];
-        var height = getWidgetData(element, 'height', '400px');
-        var resize = getWidgetBoolData(element, 'resize', false);
-        var googleTagManager = getWidgetBoolData(element, 'google-tag-manager', false);
+      for (var i = 0; i < containers.length; i++) {
+        var container = containers[i];
 
-        if (resize || googleTagManager) {
-          var config = { autoResize: resize };
-
-          if (resize) {
-            config.minHeight = height;
-          } else {
-            config.scrolling = "omit";
-            config.sizeHeight = false;
-            config.sizeWidth = false;
-          }
+        if (container.resize || container.googleTagManager || container.customWidgetData != null) {
+          var config = { };
+          config.autoResize = container.resize;
+          config.scrolling = "omit";
+          config.id = "iFrameResizer" + i;
 
           config.onMessage = function(messageData) {
-              onIframeMessage(messageData, googleTagManager);
+            onIframeMessage(messageData, container.googleTagManager);
           }
 
-          iFrameResize(config, iFrame);
+          if (container.customWidgetData == null) {
+            if (container.resize) {
+              config.minHeight = container.minHeight;
+              config.maxHeight = container.maxHeight;
+            } else {
+              config.sizeHeight = false;
+              config.sizeWidth = false;
+            }
+          } else {
+            config.minHeight = container.minHeight;
+            config.maxHeight = container.maxHeight;
+
+            (function(data) {
+              config.onInit = function (iFrame) {
+                iFrame.iFrameResizer.sendMessage({'type': 'OVEDA_WIDGET_SETTINGS_UPDATE_EVENT', 'data': data});
+              }
+            })(container.customWidgetData.settings);
+          }
+
+          var resizers = iFrameResize(config, container.iFrame);
+          container.resizer = resizers[0];
         }
       }
     };
@@ -144,4 +203,21 @@
       p.parentNode.insertBefore(element, p);
     }
 
+    function loadJSON(url) {
+      var json = loadUrlSync(url, "application/json");
+      return JSON.parse(json);
+    }
+
+    function loadUrlSync(url, mimeType)
+    {
+      var xmlhttp=new XMLHttpRequest();
+      xmlhttp.open("GET", url, false);
+      if (mimeType != null && xmlhttp.overrideMimeType) {
+        xmlhttp.overrideMimeType(mimeType);
+      }
+
+      xmlhttp.send();
+      return xmlhttp.responseText;
+    }
+
   })(window, document);
\ No newline at end of file
diff --git a/project/static/widget/calendar.html b/project/static/widget/calendar.html
new file mode 100644
index 0000000..ba0d9e3
--- /dev/null
+++ b/project/static/widget/calendar.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.2/dist/vuetify.min.css" rel="stylesheet">
+  <style>
+    [v-cloak] {
+       display: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="app" v-cloak>
+    <template v-if="widget">
+        <v-app :styles="{'max-height': widget.settings.iFrameHeight}">
+            <v-row class="fill-height" style="margin:0;">
+                <v-col>
+                  <v-sheet height="64">
+                            <v-toolbar flat>
+                                <v-btn fab text small color="grey darken-2" @click="$refs.calendar.prev()">
+                                    <v-icon small>
+                                        mdi-chevron-left
+                                    </v-icon>
+                                </v-btn>
+                                <v-btn fab text small color="grey darken-2" @click="$refs.calendar.next()">
+                                    <v-icon small>
+                                        mdi-chevron-right
+                                    </v-icon>
+                                </v-btn>
+                                <v-toolbar-title>
+                                    {{ title }}
+                                </v-toolbar-title>
+                                <v-spacer></v-spacer>
+                            </v-toolbar>
+                    </v-sheet>
+                    <v-sheet :height="calendarHeight">
+                            <v-calendar
+                                ref="calendar"
+                                v-model="focus"
+                                locale="de"
+                                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                                :type="widget.settings.calendarType"
+                                :events="events"
+                                :event-color="widget.settings.eventBackgroundColor"
+                                @click:event="showEvent"
+                                @change="calendarChanged"></v-calendar>
+                            <v-menu
+                                v-model="selectedOpen"
+                                :close-on-content-click="false"
+                                :activator="selectedElement"
+                                offset-x
+                              >
+                                <v-card flat v-if="selectedEvent">
+                                  <v-card-title>{{ selectedEvent.name }}</v-card-title>
+                                  <v-card-subtitle>
+                                      <v-icon small>mdi-calendar</v-icon> {{ render_event_date_instance(selectedEvent.date.start, selectedEvent.date.allday) }}
+                                      <event-warning-pills :event="selectedEvent.date.event"></event-warning-pills>
+                                  </v-card-subtitle>
+                                  <v-card-text>
+                                    <div><v-icon small>mdi-database</v-icon> {{ selectedEvent.date.event.organization.name }}</div>
+                                    <div v-if="selectedEvent.date.event.organizer.name != selectedEvent.date.event.organization.name"><v-icon small>mdi-server</v-icon> {{ selectedEvent.date.event.organizer.name }}</div>
+                                    <div><v-icon small>mdi-map-marker</v-icon> {{ selectedEvent.date.event.place.name }}</div>
+                                  </v-card-text>
+
+                                  <v-card-actions>
+                                    <v-spacer></v-spacer>
+                                    <v-btn
+                                      text
+                                      color="secondary"
+                                      @click="selectedOpen = false"
+                                    >
+                                      Schließen
+                                    </v-btn>
+                                    <v-btn
+                                      text
+                                      color="primary"
+                                      @click="openEventDate(selectedEvent.date)"
+                                    >
+                                      Details
+                                    </v-btn>
+                                  </v-card-actions>
+                                </v-card>
+                              </v-menu>
+                        </v-sheet>
+                    </v-col>
+                </v-row>
+        </v-app>
+    </template>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.2/dist/vuetify.js"></script>
+  <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo=" crossorigin="anonymous"></script>
+  <script>
+      axios.defaults.baseURL = window.location.origin;
+      moment.locale("de");
+
+Vue.component('event-warning-pills', {
+    props: ['event'],
+    template: `
+        <span>
+            <v-chip v-if="event.status && event.status != 'scheduled'" small color="yellow">
+                <template v-if="event.status == 'cancelled'">Abgesagt</template>
+                <template v-else-if="event.status == 'movedOnline'">Online verschoben</template>
+                <template v-else-if="event.status == 'postponed'">Verschoben</template>
+                <template v-else-if="event.status == 'rescheduled'">Neu angesetzt</template>
+            </v-chip>
+            <v-chip v-if="event.booked_up" small color="yellow">Ausgebucht</v-chip>
+            <v-chip v-if="event.attendance_mode && event.attendance_mode != 'offline'" small color="blue">
+                <template v-if="event.attendance_mode == 'online'">Online</template>
+                <template v-else-if="event.attendance_mode == 'mixed'">Präsenzveranstaltung und online</template>
+            </v-chip>
+        </span>
+    `
+});
+
+    var vue_app_data = {
+        widget: null,
+        title: "",
+        focus: '',
+        events: [],
+        selectedEvent: null,
+        selectedElement: null,
+        selectedOpen: false,
+    };
+
+    var app = new Vue({
+      el: '#app',
+      vuetify: new Vuetify(),
+      data: vue_app_data,
+      computed: {
+          calendarHeight() {
+              if (!this.widget) {
+                  return 0;
+              }
+
+            return parseInt(this.widget.settings.iFrameHeight) - 88;
+          }
+      },
+      watch: {
+          'widget.settings.organizationId': function(val) {
+            this.parameterChanged();
+          },
+          'widget.settings.eventListId': function(val) {
+            this.parameterChanged();
+          }
+      },
+      methods: {
+          parameterChanged() {
+            if (this.$refs.calendar) {
+                this.loadEvents(this.$refs.calendar.start, this.$refs.calendar.end);
+            }
+          },
+          calendarChanged({ start, end }) {
+              this.loadEvents(start.date, end.date);
+          },
+          loadEvents(start, end) {
+            if (this.widget == null) {
+                return;
+            }
+
+            this.title = this.$refs.calendar.title;
+
+            let params = {
+                date_from: start,
+                date_to: end,
+                per_page: 50,
+            };
+
+            if (this.widget.settings.eventListId) {
+                params.event_list_id = this.widget.settings.eventListId;
+            }
+            else if (this.widget.settings.organizationId) {
+                params.organization_id = this.widget.settings.organizationId;
+            }
+
+            axios
+                .get(`/api/v1/event-dates/search`, { params: params })
+                .then((response) => {
+                    this.events = response.data.items.map(function(date) {
+                        return {
+                            name: date.event.name,
+                            start: moment(date.start).toDate(),
+                            end: date.end != null ? moment(date.end).toDate() : null,
+                            timed: !date.allday,
+                            date: date,
+                        };
+                    });
+                    this.scrollToMinTime();
+                });
+        },
+        scrollToMinTime() {
+            if (!this.$refs.calendar) {
+                return;
+            }
+
+            if (this.$refs.calendar.type != 'week') {
+                return;
+            }
+
+            if (this.events.length < 1) {
+                return;
+            }
+
+            const min_event = this.events.reduce(function(prev, curr) {
+                return prev.start.getHours() < curr.start.getHours() ? prev : curr;
+            });
+            this.$refs.calendar.scrollToTime({ hour: min_event.start.getHours(), minute: 0 });
+        },
+        showEvent ({ nativeEvent, event }) {
+            const open = () => {
+                this.selectedEvent = event
+                this.selectedElement = nativeEvent.target
+                requestAnimationFrame(() => requestAnimationFrame(() => this.selectedOpen = true))
+            }
+
+            if (this.selectedOpen) {
+                this.selectedOpen = false
+                requestAnimationFrame(() => requestAnimationFrame(() => open()))
+            } else {
+                open()
+            }
+
+            nativeEvent.stopPropagation()
+        },
+        openEventDate(date) {
+            const url = `${axios.defaults.baseURL}/eventdate/${date.id}`;
+            this.trackAnalyticsEvent({'event':'linkClick', 'url':url});
+            window.open(url);
+        },
+        render_event_date_instance(value, allday, format = "dd. DD.MM.YYYY LT", alldayFormat = "dd. DD.MM.YYYY") {
+            const instance = moment(value);
+
+            if (allday) {
+                return instance.format(alldayFormat);
+            }
+
+            return instance.format(format);
+        },
+        trackAnalyticsEvent(data) {
+            if ('parentIFrame' in window) {
+                parentIFrame.sendMessage({'type': 'OVEDA_ANALYTICS_EVENT', 'data': data});
+            }
+        }
+    }
+    });
+
+    window.iFrameResizer = {
+        onReady: function() {
+            app.trackAnalyticsEvent({'event':'pageView', 'url':document.location.href});
+        },
+        onMessage: function(message) {
+            if (message.type != 'OVEDA_WIDGET_SETTINGS_UPDATE_EVENT') {
+                return;
+            }
+
+            if (vue_app_data.widget == null) {
+                vue_app_data.widget = { settings: message.data };
+                return;
+            }
+
+            for (var key in message.data) {
+                vue_app_data.widget.settings[key] = message.data[key];
+            }
+        }
+    }
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js" integrity="sha512-14SY6teTzhrLWeL55Q4uCyxr6GQOxF3pEoMxo2mBxXwPRikdMtzKMYWy2B5Lqjr6PHHoGOxZgPaxUYKQrSmu0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/project/static/widget/search.html b/project/static/widget/search.html
new file mode 100644
index 0000000..97d4bdd
--- /dev/null
+++ b/project/static/widget/search.html
@@ -0,0 +1,525 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Oveda Widget</title>
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+    <style>
+        [v-cloak] {
+           display: none;
+        }
+    </style>
+
+    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
+    <script src="https://unpkg.com/vue-i18n@8.25.0/dist/vue-i18n.min.js"></script>
+    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo=" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
+  </head>
+  <body>
+    <div id="app" v-cloak>
+        <template v-if="widget">
+            <component :is="`style`">
+                body {
+                    background-color: {{ widget.settings.background }};
+                    color: {{ widget.settings.textColor }};
+                    font-family: {{ widget.settings.fontFamily }};
+                    padding: {{ widget.settings.padding }};
+                }
+
+                .page-link {
+                    background-color: {{ widget.settings.background }};
+                    border-color: {{ widget.settings.pagingBorderColor }};
+                    color: {{ widget.settings.pagingColor }};
+                }
+
+                .page-link:hover {
+                    background-color: {{ widget.settings.pagingColor }};
+                    border-color: {{ widget.settings.pagingColor }};
+                    color: {{ widget.settings.pagingActiveTextColor }};
+                }
+
+                .page-item.active .page-link {
+                    background-color: {{ widget.settings.pagingColor }};
+                    border-color: {{ widget.settings.pagingColor }};
+                    color: {{ widget.settings.pagingActiveTextColor }};
+                }
+
+                .page-item.disabled .page-link {
+                    background-color: {{ widget.settings.background }};
+                    border-color: {{ widget.settings.pagingBorderColor }};
+                    color: {{ widget.settings.pagingDisabledTextColor }};
+                }
+
+                .btn-primary,
+                .btn-primary:disabled,
+                .btn-primary:active,
+                .btn-primary:not(:disabled):not(.disabled):active,
+                .btn-primary:focus {
+                    background-color: {{ widget.settings.buttonBackgroundColor }};
+                    border-color: {{ widget.settings.buttonBorderColor }};
+                    color: {{ widget.settings.buttonTextColor }};
+                }
+
+                .btn-secondary,
+                .btn-secondary:disabled,
+                .btn-secondary:hover,
+                .btn-secondary:active,
+                .btn-secondary:not(:disabled):not(.disabled):active,
+                .btn-secondary:focus {
+                    background-color: {{ widget.settings.printButtonBackgroundColor }};
+                    border-color: {{ widget.settings.printButtonBorderColor }};
+                    color: {{ widget.settings.printButtonTextColor }};
+                }
+
+                .input-group-text {
+                    background-color: {{ widget.settings.filterLabelBackgroundColor }};
+                    border-color: {{ widget.settings.filterLabelBorderColor }};
+                    color: {{ widget.settings.filterLabelTextColor }};
+                }
+
+                .form-control,
+                .form-control.focus,
+                .form-control:focus,
+                .custom-select,
+                .custom-select:focus {
+                    background-color: {{ widget.settings.filterInputBackgroundColor }};
+                    border-color: {{ widget.settings.filterInputBorderColor }};
+                    color: {{ widget.settings.filterInputTextColor }};
+                }
+
+                .card {
+                    background-color: {{ widget.settings.eventBackgroundColor }};
+                    border-color: {{ widget.settings.eventBorderColor }};
+                }
+
+                .card-title {
+                    color: {{ widget.settings.eventNameTextColor }};
+                }
+
+                .card-subtitle.text-body {
+                    color: {{ widget.settings.eventDateTextColor }}!important;
+                }
+
+                .card .text-muted {
+                    color: {{ widget.settings.eventInfoTextColor }}!important;
+                }
+
+                .badge-warning {
+                    background-color: {{ widget.settings.eventBadgeWarningBackgroundColor }};
+                    color: {{ widget.settings.eventBadgeWarningTextColor }};
+                }
+
+                .badge-info {
+                    background-color: {{ widget.settings.eventBadgeInfoBackgroundColor }};
+                    color: {{ widget.settings.eventBadgeInfoTextColor }};
+                }
+
+                a, a:hover {
+                    color: {{ widget.settings.linkColor }};
+                }
+
+                a.underlined {
+                    text-decoration: underline;
+                }
+            </component>
+            <div v-if="widget.settings.showFilter">
+                <b-form @submit.stop.prevent="loadData" inline class="mb-4" autocomplete="off">
+                    <b-input-group prepend="Von" class="mb-2 mr-sm-2">
+                        <b-form-datepicker v-model="form.dateFrom" locale="de" start-weekday="1" hide-header :date-format-options="{ year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short' }"></b-form-datepicker>
+                    </b-input-group>
+                    <b-input-group prepend="bis" class="mb-2 mr-sm-2">
+                        <b-form-datepicker v-model="form.dateTo" locale="de" placeholder="Kein Datum gewählt" :min="form.dateFrom" start-weekday="1" hide-header :date-format-options="{ year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short' }"></b-form-datepicker>
+                    </b-input-group>
+                    <b-input-group prepend="Kategorie" class="mb-2 mr-sm-2">
+                        <b-form-select v-model="form.category_id" :options="categories"></b-form-select>
+                    </b-input-group>
+                    <b-input-group prepend="Stichwort" class="mb-2 mr-sm-2">
+                        <b-form-input v-model="form.keyword"></b-form-input>
+                    </b-input-group>
+                    <b-button variant="primary" class="mb-2" type="submit" :disabled="isLoading">
+                        <b-spinner small v-if="isLoading"></b-spinner>
+                        Finden
+                    </b-button>
+                  </b-form-group>
+                </b-form>
+            </div>
+            <b-overlay :show="isLoading" variant="transparent">
+                <div v-if="error" class="mb-4">
+                    <b-alert show variant="danger">{{ error }}</b-alert>
+                    <button type="button" class="btn btn-outline-secondary" @click="loadData()"><i class="fa fa-sync-alt"></i></button>
+                </div>
+                <template v-if="widget.settings.layout == 'card'">
+                    <div v-for="date in dates">
+                        <!-- Desktop -->
+                        <div class="row mb-3 d-none d-sm-block">
+                            <div class="col-sm">
+                                <div class="card">
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-sm-8">
+                                                <h5 class="card-title">{{ date.event.name }} <event-warning-pills :event="date.event"></event-warning-pills></h5>
+                                                <h6 class="card-subtitle mb-2 text-body"><i class="fa fa-calendar"></i> {{ render_event_date_instance(date.start, date.allday) }}</h6>
+                                                <p class="card-text" v-if="date.event.description" v-html="date.event.description.truncate(200, true)"></p>
+                                                <small class="text-muted mr-2"><i class="fa fa-database"></i> {{ date.event.organization.name }}</small>
+                                                <small v-if="date.event.organizer.name != date.event.organization.name" class="text-muted mr-2"><i class="fa fa-server"></i> {{ date.event.organizer.name }}</small>
+                                                <small class="text-muted"><i class="fa fa-map-marker"></i> {{ date.event.place.name }}</small>
+                                                <a href="#" @click.stop.prevent="openEventDate(date)" class="stretched-link"></a>
+                                            </div>
+                                            <div class="col-sm-4 text-right">
+                                                <img v-if="date.event.photo" :src="url_for_image(date.event.photo, 200)" style="object-fit: cover; width: 200px;" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Mobile -->
+                        <div class="row mb-3 d-sm-none">
+                            <div class="col-sm">
+                                <div class="card">
+                                    <div>
+                                        <img v-if="date.event.photo" :src="url_for_image(date.event.photo, 500)" class="card-img-top" style="object-fit: cover; height: 40vw;" />
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-sm-12">
+                                                <h5 class="card-title">{{ date.event.name }} <event-warning-pills :event="date.event"></event-warning-pills></h5>
+                                                <h6 class="card-subtitle mb-2 text-body"><i class="fa fa-calendar"></i> {{ render_event_date_instance(date.start, date.allday) }}</h6>
+                                                <p class="card-text" v-if="date.event.description" v-html="date.event.description.truncate(100, true)"></p>
+                                                <small class="text-muted mr-2"><i class="fa fa-database"></i> {{ date.event.organization.name }}</small>
+                                                <small v-if="date.event.organizer.name != date.event.organization.name" class="text-muted mr-2"><i class="fa fa-server"></i> {{ date.event.organizer.name }}</small>
+                                                <small class="text-muted"><i class="fa fa-map-marker"></i> {{ date.event.place.name }}</small>
+                                                <a href="#" @click.stop.prevent="openEventDate(date)" class="stretched-link"></a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="widget.settings.layout == 'text'">
+                    <div class="mb-3">
+                        <div v-for="date in dates">
+                            {{ render_event_date_instance(date.start, date.allday, 'L', 'L') }} <a href="#" @click.stop.prevent="openEventDate(date)">{{ date.event.name }}</a> <event-warning-pills :event="date.event"></event-warning-pills>
+                        </div>
+                    </div>
+                </template>
+
+                <b-pagination v-if="widget.settings.showPagination && totalRows > perPage"
+                    v-model="currentPage"
+                    :total-rows="totalRows"
+                    :per-page="perPage"
+                ></b-pagination>
+
+                <div class="d-print-none">
+                    <div v-if="widget.settings.showOvedaLink" class="mb-2">
+                        <a href="#" @click.stop.prevent="openSearch()" class="underlined">Veranstaltungen auf oveda.de anzeigen</a>
+                    </div>
+
+                    <div v-if="widget.settings.showPrintButton">
+                        <button @click="printPage()" v-if="totalRows > 0" type="button" class="btn btn-secondary btn-print"><i class="fa fa-print"></i> Drucken</button>
+                    </div>
+                </div>
+
+
+            </b-overlay>
+        </template>
+    </div>
+    <script>
+axios.defaults.baseURL = window.location.origin;
+moment.locale("de");
+
+const localizedMessages = {
+    de: {
+        categories: {
+            Art: "Kunst",
+            Book: "Literatur",
+            Movie: "Film",
+            Family: "Familie",
+            Festival: "Festival",
+            Religious: "Religion",
+            Shopping: "Shopping",
+            Comedy: "Comedy",
+            Music: "Musik",
+            Dance: "Tanz",
+            Nightlife: "Party",
+            Theater: "Theater",
+            Dining: "Dining",
+            Conference: "Konferenz",
+            Meetup: "Networking",
+            Fitness: "Fitness",
+            Sports: "Sport",
+            Other: "Sonstiges",
+            Exhibition: "Ausstellung",
+            Culture: "Kultur",
+            Tour: "Führung",
+            OpenAir: "Open Air",
+            Stage: "Bühne",
+            Lecture: "Vortrag",
+        },
+    }
+};
+
+const i18n = new VueI18n({
+    locale: "de",
+    messages: localizedMessages,
+    silentFallbackWarn: true,
+});
+
+String.prototype.truncate =
+  String.prototype.truncate ||
+  function (n, useWordBoundary) {
+    if (this.length <= n) {
+      return this;
+    }
+    const subString = this.substr(0, n - 1); // the original check
+    return (
+      (useWordBoundary
+        ? subString.substr(0, subString.lastIndexOf(" "))
+        : subString) + "&hellip;"
+    );
+  };
+
+Vue.component('event-warning-pills', {
+    props: ['event'],
+    template: `
+        <span>
+            <span v-if="event.status" class="badge badge-pill badge-warning">
+                <template v-if="event.status == 'cancelled'">Abgesagt</template>
+                <template v-else-if="event.status == 'movedOnline'">Online verschoben</template>
+                <template v-else-if="event.status == 'postponed'">Verschoben</template>
+                <template v-else-if="event.status == 'rescheduled'">Neu angesetzt</template>
+            </span>
+            <span v-if="event.booked_up" class="badge badge-pill badge-warning">Ausgebucht</span>
+            <span v-if="event.attendance_mode" class="badge badge-pill badge-info">
+                <template v-if="event.attendance_mode == 'online'">Online</template>
+                <template v-else-if="event.attendance_mode == 'mixed'">Präsenzveranstaltung und online</template>
+            </span>
+        </span>
+    `
+});
+
+var vue_app_data = {
+    widget: null,
+    totalRows: 0,
+    currentPage: 1,
+    dates: [],
+    isLoading: false,
+    isLoadingCategories: false,
+    initialLoaded: false,
+    initialLoadedCategories: false,
+    error: null,
+    form: {
+        dateFrom: moment().toDate(),
+        dateTo: null,
+        keyword: null,
+        category_id: null,
+    },
+    categories: null,
+};
+
+var app = new Vue({
+    el: '#app',
+    i18n,
+    data: vue_app_data,
+    mounted() {
+        this.isLoading = false;
+        this.error = null;
+        this.dates = [];
+        this.loadData();
+        this.loadCategories();
+    },
+    computed: {
+        perPage() {
+            return this.widget != null ? Math.min(50, this.widget.settings.eventsPerPage) : 10;
+        }
+    },
+    watch: {
+        currentPage: function (val) {
+            this.loadData();
+        },
+        widget: function (val) {
+            this.loadData();
+            this.loadCategories();
+        },
+        'widget.settings.organizationId': function(val) {
+            this.parameterChanged();
+        },
+        'widget.settings.eventListId': function(val) {
+            this.parameterChanged();
+        },
+        'widget.settings.eventsPerPage': function(val) {
+            this.currentPage = 1;
+            this.parameterChanged();
+        },
+        'widget.settings.showFilter': function(val) {
+            if (!this.initialLoadedCategories) {
+                return;
+            }
+
+            this.loadCategories();
+        },
+    },
+    methods: {
+        parameterChanged() {
+            if (!this.initialLoaded) {
+                return;
+            }
+
+            this.loadData();
+        },
+        getSearchParams() {
+            let params = {
+                page: this.currentPage,
+                per_page: this.perPage,
+                date_from: moment(this.form.dateFrom).format("YYYY-MM-DD"),
+            };
+
+            if (this.widget.settings.eventListId) {
+                params.event_list_id = this.widget.settings.eventListId;
+            }
+            else if (this.widget.settings.organizationId) {
+                params.organization_id = this.widget.settings.organizationId;
+            }
+
+            if (this.form.dateTo) {
+                params.date_to = moment(this.form.dateTo).format("YYYY-MM-DD");
+            }
+
+            if (this.form.keyword) {
+                params.keyword = this.form.keyword;
+            }
+
+            if (this.form.category_id && this.form.category_id > 0) {
+                params.category_id = this.form.category_id;
+            }
+
+            return params;
+        },
+        loadData() {
+            if (this.widget == null) {
+                return;
+            }
+
+            this.isLoading = true;
+
+            const params = this.getSearchParams();
+            axios
+                .get(`/api/v1/event-dates/search`, { params: params })
+                .then((response) => {
+                    this.error = null;
+                    this.dates = response.data.items;
+                    this.totalRows = response.data.total;
+                    this.isLoading = false;
+                    this.initialLoaded = true;
+                    this.scrollToTop();
+                })
+                .catch(error => {
+                    this.isLoading = false;
+                    this.dates = [];
+                    this.totalRows = 0;
+                    this.error = error.message;
+                    this.scrollToTop();
+                });
+        },
+        loadCategories() {
+            if (this.widget == null ||
+                !this.widget.settings.showFilter ||
+                this.categories != null) {
+                return;
+            }
+
+            this.isLoadingCategories = true;
+
+            axios
+                .get(`/api/v1/event-categories`)
+                .then((response) => {
+                    let categories = response.data.items.map(function(c) {
+                        return { value: c.id, text: i18n.t(`categories.${c.name}`) };
+                    });
+                    categories.sort(function (a, b) {
+                        return a.text > b.text ? 1 : -1;
+                    })
+                    categories.unshift({ value: 0, text: "" });
+                    this.categories = categories;
+                    this.isLoadingCategories = false;
+                    this.initialLoadedCategories = true;
+                })
+                .catch(error => {
+                    this.isLoadingCategories = false;
+                });
+        },
+        render_event_date_instance(value, allday, format = "dd. DD.MM.YYYY LT", alldayFormat = "dd. DD.MM.YYYY") {
+            const instance = moment(value);
+
+            if (allday) {
+                return instance.format(alldayFormat);
+            }
+
+            return instance.format(format);
+        },
+        url_for_image(image, size) {
+            return `${axios.defaults.baseURL}${image.image_url}?s=${size}`
+        },
+        scrollToTop() {
+            window.scrollTo(0,0);
+
+            if ('parentIFrame' in window) {
+                parentIFrame.scrollToOffset(0,0);
+            }
+        },
+        printPage() {
+            window.print();
+        },
+        openEventDate(date) {
+            const url = `${axios.defaults.baseURL}/eventdate/${date.id}`;
+            this.trackAnalyticsEvent({'event':'linkClick', 'url':url});
+            window.open(url);
+        },
+        openSearch() {
+            const params = this.getSearchParams();
+            const url = `${axios.defaults.baseURL}/eventdates`;
+            const searchUrl = axios.getUri({ method: "get", url: url, params: params });
+            window.open(searchUrl);
+        },
+        trackAnalyticsEvent(data) {
+            if ('parentIFrame' in window) {
+                parentIFrame.sendMessage({'type': 'OVEDA_ANALYTICS_EVENT', 'data': data});
+            }
+        },
+        updateSettings(settings) {
+            if (this.widget == null) {
+                this.widget = { settings: settings };
+            }
+
+            for (var key in settings) {
+                this.widget.settings[key] = settings[key];
+            }
+        }
+    }
+});
+
+window.iFrameResizer = {
+    onReady: function() {
+        app.trackAnalyticsEvent({'event':'pageView', 'url':document.location.href});
+    },
+    onMessage: function(message) {
+        if (message.type != 'OVEDA_WIDGET_SETTINGS_UPDATE_EVENT') {
+            return;
+        }
+
+        app.updateSettings(message.data);
+    }
+}
+    </script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js" integrity="sha512-14SY6teTzhrLWeL55Q4uCyxr6GQOxF3pEoMxo2mBxXwPRikdMtzKMYWy2B5Lqjr6PHHoGOxZgPaxUYKQrSmu0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  </body>
+</html>
diff --git a/project/templates/layout.html b/project/templates/layout.html
index 46a35e1..7d3f9fa 100644
--- a/project/templates/layout.html
+++ b/project/templates/layout.html
@@ -269,6 +269,7 @@
                     <a class="dropdown-item" href="{{ url_for('manage_admin_unit_organization_invitations', id=current_admin_unit.id) }}">{{ _('Organization invitations') }}</a>
                     {% endif %}
                     <a class="dropdown-item" href="{{ url_for('admin_unit_update', id=current_admin_unit.id) }}">{{ _('Settings') }}</a>
+                    <a class="dropdown-item" href="{{ url_for('manage_admin_unit_custom_widgets', id=current_admin_unit.id) }}">{{ _('Custom widgets') }}</a>
                     <a class="dropdown-item" href="{{ url_for('manage_admin_unit_widgets', id=current_admin_unit.id) }}">{{ _('Widgets') }}</a>
                     <a class="dropdown-item" href="{{ url_for('organizations', path=current_admin_unit.id) }}">{{ _('Profile') }}</a>
                   </div>
diff --git a/project/templates/layout_vue.html b/project/templates/layout_vue.html
index 7da4ee4..7938115 100644
--- a/project/templates/layout_vue.html
+++ b/project/templates/layout_vue.html
@@ -35,7 +35,7 @@
 
 {% block content %}
 {% block vue_container %}
-<div id="vue-container"><router-view></router-view></div>
+<div id="vue-container"{% block vue_container_attribs %}{% endblock vue_container_attribs %}><router-view></router-view></div>
 {% endblock %}
 <script>
   Vue.component("vue-typeahead-bootstrap", VueTypeaheadBootstrap);
@@ -76,6 +76,14 @@
             relationVerify: "Verify new organization",
             relationVerifyDescription: "If set, events of the new organization are publicly visible.",
           },
+          customWidget: {
+            className: "Custom widget",
+            listName: "Custom widgets",
+            widgetType: "Type",
+            widgetTypeSearch: "Search",
+            widgetTypeCalendar: "Calendar",
+            name: "Name",
+          },
           event: {
             className: "Event",
             listName: "Events",
@@ -96,6 +104,7 @@
         },
         cancel: "Cancel",
         decline: "Decline",
+        save: "Save",
         submit: "Submit",
         view: "View",
         edit: "Edit",
@@ -175,6 +184,14 @@
             relationVerify: "Neue Organisation verifizieren",
             relationVerifyDescription: "Wenn gesetzt, sind Veranstaltungen der neuen Organisation öffentlich sichtbar.",
           },
+          customWidget: {
+            className: "Custom widget",
+            listName: "Custom widgets",
+            widgetTypeSearch: "Suche",
+            widgetTypeCalendar: "Kalender",
+            widgetType: "Typ",
+            name: "Name",
+          },
           event: {
             className: "Veranstaltung",
             listName: "Veranstaltungen",
@@ -195,6 +212,7 @@
         },
         cancel: "Abbrechen",
         decline: "Ablehnen",
+        save: "Speichern",
         submit: "Senden",
         view: "Anzeigen",
         edit: "Bearbeiten",
diff --git a/project/templates/manage/custom_widgets.html b/project/templates/manage/custom_widgets.html
new file mode 100644
index 0000000..d790a92
--- /dev/null
+++ b/project/templates/manage/custom_widgets.html
@@ -0,0 +1,46 @@
+{% extends "layout_vue.html" %}
+
+{% block html_attribs %}{% if full_height %} class="h-100"{% else %}{{ super() }}{% endif %}{% endblock html_attribs %}
+{% block body_attribs %}{% if full_height %} class="h-100"{% else %}{{ super() }}{% endif %}{% endblock body_attribs %}
+{% block body_content__attribs %}{% if full_height %} style="height:100%;"{% else %}{{ super() }}{% endif %}{% endblock %}
+{% block content_container_attribs %}{% if full_height %} class="h-100"{% else %}{{ super() }}{% endif %}{% endblock content_container_attribs %}
+{% block vue_container_attribs %}{% if full_height %} class="h-100"{% else %}{{ super() }}{% endif %}{% endblock vue_container_attribs %}
+{% block navbar %}{% if full_height %} {% else %}{{ super() }}{% endif %}{% endblock navbar %}
+{% block managebar %}{% if full_height %} {% else %}{{ super() }}{% endif %}{% endblock managebar %}
+{% block footer %}{% if full_height %} {% else %}{{ super() }}{% endif %}{% endblock footer %}
+
+{%- block title -%}
+{{ _('Custom widgets') }}
+{%- endblock -%}
+
+{% block header_before_site_js %}
+{{ super() }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+{%- endblock -%}
+
+{% block component_scripts %}
+<script src="{{ url_for('static', filename='vue/widget-configurator/list.vue.js')}}"></script>
+<script src="{{ url_for('static', filename='vue/widget-configurator/configurator.vue.js')}}"></script>
+{% endblock %}
+
+{% block component_definitions %}
+Vue.component("WidgetConfiguratorList", WidgetConfiguratorList);
+Vue.component("WidgetConfigurator", WidgetConfigurator);
+{% endblock %}
+
+{% block vue_routes %}
+const routes = [
+  {
+    path: "/manage/admin_unit/:organization_id/custom-widgets",
+    component: WidgetConfiguratorList,
+  },
+  {
+    path: "/manage/admin_unit/:organization_id/custom-widgets/create",
+    component: WidgetConfigurator,
+  },
+  {
+    path: "/manage/admin_unit/:organization_id/custom-widgets/:custom_widget_id/update",
+    component: WidgetConfigurator,
+  },
+];
+{% endblock %}
diff --git a/project/translations/de/LC_MESSAGES/messages.mo b/project/translations/de/LC_MESSAGES/messages.mo
index 7415cdd34d465014459629c47ce9110491e0c4fc..d47d40ef48b11c38f93e4bcd1bf49749ecd42c8d 100644
GIT binary patch
delta 7665
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
RDoS&E1^)jV6+<f9{1^K2h*bap

delta 7626
zcmYM(d0f{;9>?(!K?LFw@j!teARsD&c%ZZ*qGBp49%*XcM<SZH;?+0LurgBDQrBFI
zqHNdu%Cdaex^|eGu4iVN*~4tJP0cQ~+}E3#$7B1$=gfS+bA9GBU(hO_^80m}pLemA
z{~E)8r>hy$5D$l`_W%DT#v0R{>Lkp;4H%7Qu`hm)bTxT##zbL0YKQ?CfMc-+mbm&f
z4540%{>FG_iF>fzS&s3%um;s}57xs2u6`Od(FF{|8yJbdy63@k_EC>SEhG!|yd!EO
z{V*ICVF>e^RTS#buo1Q5J;+$*9Sp_usEMw*=Qpqk^`CJNCisj=#d)X+D^NS!i4Wj=
z*a?qfFoq}C1;k*4M?(_|LHHnQ$6Zh_7Gg~th{-qtHPJF0k6TeYtDDFoFbxM{4;+FO
zScvzr5f&y@h1^WVH0ra^^HJDDL1%vmHPA&=yLz!nlYktv>4@6da8#s9P!XDnijap|
z&{L=lt;4E_U~TF<u^E1Vip=ds#9tFvV|#Tm4t2I|Fao<{3=Tncn1vc(v1{Ls{?w16
z7H}LD!E>kyFJaY0sD)Kau?vnujh~Q0{PjYXYv_PlaS>|Z;iw&tLG5S?>PY6Il5(+Y
z-+)T0N>snSs3UyGc?31?2@Jq5Q5(JLQK(Mg4i@1bs2%p^pwn?aF2OfZ6J#{D9Xp`v
z{hXswNjx1N!KbkcUO|nM#)0e12l7XAT!>B3+fIQw&F834`_ZZu#-etfggWC4S8tDs
zST|Q6fLh2XY=F~H<2;8t+RdokIpW&CMuq-9GOuSMni^A|hHTUTeNY2TLanq66_I_I
zfnTF`RGY>u%twM_W+G#nmz*D>uJMnkh18;x7LtKn2-6em>i$ompb5*I6{s)VdsQzO
zbIR4PySg8%((@S9f-_OKq!2aXM67|&U=XgtVBCNY;OnRe?8Z>$H~*v%f+yVzm)r~2
zUHx|q<9RUK55@Y<RMdd2QT_9sy)c~mVAT5)Tzjc&UxFI%&**7@3irZxREGno6@QG{
z$!XLMFQAh39xBUCrkyyz8HrW7gL<BXh1eK1&P>-nAH%6H%q0FbDXgTS7}sNK^lxFm
zU^&hg@K3bg!cLgM!OQ8+eb}4&U2KUx_@fbeNRpXXQSC?hqZQsqEwoiD;;%Ezp*0By
zU=+^9UichxgUlDGGq1tw6q$zT!&K)(s0bCKl5IKaNGee~--#M`KPuObx#!nB3XwG2
z#z3sm#-3>yDufM?O&cF-g1)GTO+y{sJk)z-sD-U?&)1?B@G>d_Tb!rd^Sh{io`1Go
zVGt@?BV0WOHBo}AH$g?Jg|jDW!Nu<RRMdc_&IK4veGx|BTIXhLME!01+%uObsN+wl
z<hz5qpEcWBn>u@;vUV!!ht!j(_g_Kv-;SDS4=OT8(1$0n9^OXv3vFl3z);=)J{0Ej
zU^psd7f_M7hPuzUoRK-Uo{0)|Z`6VYqass`I^(6-4A-HO?1=Ld=f5$A_H&Z?&5y1j
z>_K}JX{gX;VjV0%g?cEGxMnPNz;&pz{mj*MMYMrD)cb{~BkYe_*ih8Mr=lV^A3d$`
zX$tD_ymPI4VH4J(eJg4qhg|zPR90Vgevi7(x7~C9_O@ONwbMk@IPFmpEpkq7Z&sHC
z2k8!&Ewt&FuAmlq4|OpDb8Rr{V_oVQsQ0>}j(Y^^VoXJy+DcRq{(|cNIw~FZqxv0j
z?Uzu&yO~Q4jG|DFkT%457>8?76YfJD^QWk&T|{l>Ix1-QQNakzvr!I1wI`y2+XQtA
znW#K%hZ-jrHEv;^XID6c2CaNNYUMLfX|N2ngAJ$!ZAR_n5bF7P)cZG31N(Kf(T_ky
z$cI{B3ujxbPrZY4kVhethUusQU&Y4wHV(rp*c0>fjd>WKM}_Vx#$za-V(l;;W3dft
z=lxMfIT#z@SR~cWLR2IUpwh-WL_s@0flAabP$9mF8pyx1H5j#%2xnc?`*E(G<?8KF
zdDjz_x8u<tJyax@p!%&uBIKFZC}hyE7ZdR+HpieYc1LY-EcF4{3=cTJ#X{<J3hY;U
zG_q#11{uP9h6xzgm0zAQ50zt!Q1ks2^Yjh+l!A|jh==SMx4>lT-B6*Oj0#mL*1$5<
z*_NZueiJI0c4BQjgxcvDR8Cw$?f53DUqCneybf0V9VCfDBObIuO*9B~B*my?nTY{d
zjx})&Dj7GTLcJGL@dWzgZ>Y2X1IJ=ecY8f2qx#Q5ZDbL8ffSZgXoD+JJNXc^@GR;m
zf_vCs@7kf-$Doq$MO6QNNIsf_=!brs%Zh3&8a3`}GMLSqk5Lhe>ctlylY0?=-ZM*S
zP|`hxVYnW(<ISj*Zgcg$sL&oj?ertp{x9b#Y)<=m48fq@HuTY`anew?EE5%pg5I3J
zcG8;$O*k2K9cQ8zREbK;{ix)+fLegB$ewjN>Im{N42NPePQ(aYg~3>Xns6&-;yxUS
z*E|Xt6uS4Z1I)$h)R&`nxB~m(D%6gyVi4ZK2)u`yAhfS-uZOB9x_UZl!ffn_<8cAL
ziHd~Rn9-Gdxi}j~V+nqaykoldw*#z4O?(s^<7rI6Kd>1l^L0wYzRvm1N>oISqc-p}
zYJq+Os*>F^p%j!vv9`e^qpnSBR7g9aZb4t<XPlXcRi9!^r+&yi{{ibz4;pAc(LU7C
zw!?57gvyO#)E99r2I&6prl7NV+xZXFK%Y3TU@hu*FcL!_v7w7c<w9$W!hF<`3_y+d
zn0r12wc`b-jh3Mn_B@6#zu8VfJ3N4T@eJ0(%czy#!DtK~WRui~nlJ^GBRM!4J0L%~
zO$Bzr%eW0w2iy10qIUirYD0lTIDZWsLqS=biDR$_5>2xm+hO3N){dxqJ`a^l@40p}
z)Gjawb#z6joeo1qY@Dl?VqNM_Vr^VIl=y4MTWDyAZ($OiMkUj4uAan?LM2;Q)Bum8
z&VCvCa5rirr&0I(JJb=}LM7c@R4xS$w-K&`O6G*&#9s?&>KfXhI^>}SD0KCQQSXgJ
zb)4wxvs`^4s^2rHelMbSz6sTDCn_@Uq9St?wc(Q<g;)wVoM9vE4w|7pNG(wlwnOc#
z6RO@FRqv0=fgz~(N1zrm4mHs<)Pm-^`eNrZsD*i}DQJL=r~xXRn^7INp(cFG)!%m>
zMZJFtwUG0u2`{7ieTz!oTc~9A8)-jm4N&jLBe%>mDHOEg_U=J9)XIubSv>?b@IkDO
zAD{+4idy*R_yT^3?Q!-ft{(2e2^h;Dy|E1SK|6<iuqm1TF!P%Q6!hXr%*EWX_7{o;
zm`!~f=HNHj5fjJRiN|0Z^<qrLGE{PI#{&EieHhMabk>=uNcKdv55#!pH>E1zTGW7V
zp(1h?70N59?7r@v`;E8vHv#L@-U>BvFVwYq1OspqYT?r{6}O_sJ%f7xEA$k?>#pG@
z)}($H^=0!fw%0Bav#7U4JugA^n}I<%2Q~0w)X|lrvVA@3{Wnk>+kpvq9QEF<V&Y$e
z!tXR_K!46b2BB_67$#veS1-cG)E`HM`bAX#ZKw(NVj>>KM)(b;-~%Q0{<lPpmyg=u
zxDw*;M`1b*y05d`gEG`g*Pya@pQ|6oWa_t2AC!6%`MUw8q6R$dJb~(e5w##Q$@WV^
zz1Iz^epYxC6q?6SJ6eVc^+pWD6R3!MhSl*RYC&J2&i*bcxuPGp?`5HKARCo4g{W~x
zp>D?nEW|gk8G1jthQ!HsWs^~7HXqe-DQch<s1;XWFz$BG4`K-Q4^T&O619Ny?)eWG
zPW>0uMgynVaZ@lz_rEy>g`_QpVi!~-`k_Ksg8FIq9O{<5f<AoTc?GpI|EV@N@=@cJ
zpni;(I?GW<SBVk$35M(be?h@V!}qA2giW*8D+cvqI%-F`*aZ8b7W4$Rz*V>q4`Wj-
zm~MZXPD3qt1u6ntobO^3^<x;!{N}O>cpbI#UtB$Wh7D;9>L?PBkeM{pk+j6x*bO6b
z7}mlmn2w7v3wNN#{TgfIJ=EDp&LsZYQ7#3Ax)}Asv#8$(UPcXY0Cl!MIDf`y>c69|
zQ`9VeXTWS!zs0D?Y((~Aj^jw|JllS0D^cS{mJ)y6)6S*#?2A$NbvA0kji_XN4HIxH
zcE;nbJ$jD4hH+Sr_H<`~b2w_8QdERJSAQB6(Uo(Eze2apHT(^=vt6ic{Rr#eHPit2
zoxyYMf}$~s_H0zhdte&Q!6K|cZRj>G#Rl{2KeE1zEvcXNC=8<zGN1nkg%dCjEAe&w
z2DS6@1@_;acA!Fg6T4#46ZZWQ)KUB$WAV7F{};9JT5MFw9gB)+8fxKQ76t9Nz%@LI
z4X96XK8uRL8yJHJo##=J`w12Lz$fkB^?ayg8;HuK$rz7IP!qq3TF4fR)BWF1LCJRx
zm6dl<FE-{*Y2p^R1Rp}RA4Bcv4C-tzqt5agw!#}2hRKU;WLjYp>N8Q}Z^CRmhVfcL
zz+yW<G8XV49joIET)m@b)UNW_!kWAOll)Rj&CIsG7A<pHX6-63>>RS|tAU4`{tp1r
Bd!zsW

diff --git a/project/translations/de/LC_MESSAGES/messages.po b/project/translations/de/LC_MESSAGES/messages.po
index fb53f73..15c3eab 100644
--- a/project/translations/de/LC_MESSAGES/messages.po
+++ b/project/translations/de/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2021-12-08 13:32+0100\n"
+"POT-Creation-Date: 2021-12-30 14:51+0100\n"
 "PO-Revision-Date: 2020-06-07 18:51+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: de\n"
@@ -194,29 +194,29 @@ msgstr "."
 msgid "message"
 msgstr "message"
 
-#: project/api/organization/resources.py:364
+#: project/api/organization/resources.py:371
 #: project/views/admin_unit_member_invitation.py:85
 msgid "You have received an invitation"
 msgstr "Du hast eine Einladung erhalten"
 
-#: project/forms/admin.py:10 project/templates/layout.html:311
+#: project/forms/admin.py:10 project/templates/layout.html:312
 #: project/views/root.py:37
 msgid "Terms of service"
 msgstr "Nutzungsbedingungen"
 
-#: project/forms/admin.py:11 project/templates/layout.html:315
+#: project/forms/admin.py:11 project/templates/layout.html:316
 #: project/views/root.py:45
 msgid "Legal notice"
 msgstr "Impressum"
 
 #: project/forms/admin.py:12 project/templates/_macros.html:1392
-#: project/templates/layout.html:319
+#: project/templates/layout.html:320
 #: project/templates/widget/event_suggestion/create.html:204
 #: project/views/admin_unit.py:73 project/views/root.py:53
 msgid "Contact"
 msgstr "Kontakt"
 
-#: project/forms/admin.py:13 project/templates/layout.html:323
+#: project/forms/admin.py:13 project/templates/layout.html:324
 #: project/views/root.py:61
 msgid "Privacy"
 msgstr "Datenschutz"
@@ -957,7 +957,7 @@ msgstr "Standort"
 msgid "Distance"
 msgstr "Distanz"
 
-#: project/forms/event_date.py:33 project/forms/planing.py:36
+#: project/forms/event_date.py:38 project/forms/planing.py:36
 #: project/templates/widget/event_date/list.html:82
 msgid "Find"
 msgstr "Finden"
@@ -1388,7 +1388,7 @@ msgid "Manage"
 msgstr "Verwaltung"
 
 #: project/templates/home.html:30 project/templates/security/login_user.html:38
-#: project/views/widget.py:158
+#: project/views/widget.py:159
 msgid "Register for free"
 msgstr "Kostenlos registrieren"
 
@@ -1412,7 +1412,7 @@ msgstr "Organisationen"
 msgid "Planing"
 msgstr "Planung"
 
-#: project/templates/layout.html:187 project/templates/layout.html:273
+#: project/templates/layout.html:187 project/templates/layout.html:274
 #: project/templates/oauth2_client/list.html:10
 #: project/templates/oauth2_client/read.html:10
 #: project/templates/oauth2_token/list.html:10 project/templates/profile.html:4
@@ -1514,17 +1514,22 @@ msgstr "Organisationseinladungen"
 msgid "Settings"
 msgstr "Einstellungen"
 
-#: project/templates/layout.html:272 project/templates/manage/reviews.html:10
+#: project/templates/layout.html:272
+#: project/templates/manage/custom_widgets.html:13
+msgid "Custom widgets"
+msgstr "Custom widgets"
+
+#: project/templates/layout.html:273 project/templates/manage/reviews.html:10
 #: project/templates/manage/widgets.html:5
 #: project/templates/manage/widgets.html:9
 msgid "Widgets"
 msgstr "Widgets"
 
-#: project/templates/layout.html:283
+#: project/templates/layout.html:284
 msgid "Switch organization"
 msgstr "Organisation wechseln"
 
-#: project/templates/developer/read.html:4 project/templates/layout.html:333
+#: project/templates/developer/read.html:4 project/templates/layout.html:334
 #: project/templates/profile.html:29
 msgid "Developer"
 msgstr "Entwickler"
@@ -1997,7 +2002,7 @@ msgstr "Vorschau"
 msgid "Organization successfully updated"
 msgstr "Organisation erfolgreich aktualisiert"
 
-#: project/views/admin.py:68 project/views/manage.py:331
+#: project/views/admin.py:68 project/views/manage.py:346
 msgid "Settings successfully updated"
 msgstr "Einstellungen erfolgreich aktualisiert"
 
@@ -2058,27 +2063,27 @@ msgstr "Die eingegebene Email passt nicht zur Email der Einladung"
 msgid "Invitation successfully deleted"
 msgstr "Einladung erfolgreich gelöscht"
 
-#: project/views/event.py:179
+#: project/views/event.py:178
 msgid "Event successfully published"
 msgstr "Veranstaltung erfolgreich veröffentlicht"
 
-#: project/views/event.py:181
+#: project/views/event.py:180
 msgid "Draft successfully saved"
 msgstr "Entwurf erfolgreich gespeichert"
 
-#: project/views/event.py:224
+#: project/views/event.py:223
 msgid "Event successfully updated"
 msgstr "Veranstaltung erfolgreich aktualisiert"
 
-#: project/views/event.py:250
+#: project/views/event.py:249
 msgid "Event successfully deleted"
 msgstr "Veranstaltung erfolgreich gelöscht"
 
-#: project/views/event.py:409
+#: project/views/event.py:408
 msgid "Referenced event changed"
 msgstr "Empfohlene Veranstaltung wurde geändert"
 
-#: project/views/event.py:432
+#: project/views/event.py:431
 msgid "New event report"
 msgstr "Neue Meldung zu einer Veranstaltung"
 
@@ -2242,11 +2247,11 @@ msgstr ""
 "Die Einladung wurde für einen anderen Nutzer ausgestellt. Melde dich mit "
 "der Email-Adresse an, an die die Einladung geschickt wurde."
 
-#: project/views/widget.py:150
+#: project/views/widget.py:151
 msgid "Thank you so much! The event is being verified."
 msgstr "Vielen Dank! Die Veranstaltung wird geprüft."
 
-#: project/views/widget.py:154
+#: project/views/widget.py:155
 msgid ""
 "For more options and your own calendar of events, you can register for "
 "free."
@@ -2254,7 +2259,7 @@ msgstr ""
 "Für mehr Optionen und einen eigenen Veranstaltungskalender, kannst du "
 "dich kostenlos registrieren."
 
-#: project/views/widget.py:212
+#: project/views/widget.py:221
 msgid "New event review"
 msgstr "Neue Veranstaltung zu prüfen"
 
diff --git a/project/translations/en/LC_MESSAGES/messages.mo b/project/translations/en/LC_MESSAGES/messages.mo
index 2f422ea8edcb3779c26aa32e67a159c290aafa1b..eb4e5cd94747c46d79e6335a01805127c46c99b2 100644
GIT binary patch
delta 21
ccmaDW{Z@LzEKUw%0|i49D^tVGi#WYm091emp#T5?

delta 21
ccmaDW{Z@LzEKUvs3k5@CD`TV0i#WYm092?3qyPW_

diff --git a/project/translations/en/LC_MESSAGES/messages.po b/project/translations/en/LC_MESSAGES/messages.po
index 13a4a4e..e6599bd 100644
--- a/project/translations/en/LC_MESSAGES/messages.po
+++ b/project/translations/en/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2021-12-08 13:32+0100\n"
+"POT-Creation-Date: 2021-12-30 14:51+0100\n"
 "PO-Revision-Date: 2021-04-30 15:04+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: en\n"
@@ -194,29 +194,29 @@ msgstr ""
 msgid "message"
 msgstr ""
 
-#: project/api/organization/resources.py:364
+#: project/api/organization/resources.py:371
 #: project/views/admin_unit_member_invitation.py:85
 msgid "You have received an invitation"
 msgstr ""
 
-#: project/forms/admin.py:10 project/templates/layout.html:311
+#: project/forms/admin.py:10 project/templates/layout.html:312
 #: project/views/root.py:37
 msgid "Terms of service"
 msgstr ""
 
-#: project/forms/admin.py:11 project/templates/layout.html:315
+#: project/forms/admin.py:11 project/templates/layout.html:316
 #: project/views/root.py:45
 msgid "Legal notice"
 msgstr ""
 
 #: project/forms/admin.py:12 project/templates/_macros.html:1392
-#: project/templates/layout.html:319
+#: project/templates/layout.html:320
 #: project/templates/widget/event_suggestion/create.html:204
 #: project/views/admin_unit.py:73 project/views/root.py:53
 msgid "Contact"
 msgstr ""
 
-#: project/forms/admin.py:13 project/templates/layout.html:323
+#: project/forms/admin.py:13 project/templates/layout.html:324
 #: project/views/root.py:61
 msgid "Privacy"
 msgstr ""
@@ -918,7 +918,7 @@ msgstr ""
 msgid "Distance"
 msgstr ""
 
-#: project/forms/event_date.py:33 project/forms/planing.py:36
+#: project/forms/event_date.py:38 project/forms/planing.py:36
 #: project/templates/widget/event_date/list.html:82
 msgid "Find"
 msgstr ""
@@ -1343,7 +1343,7 @@ msgid "Manage"
 msgstr ""
 
 #: project/templates/home.html:30 project/templates/security/login_user.html:38
-#: project/views/widget.py:158
+#: project/views/widget.py:159
 msgid "Register for free"
 msgstr ""
 
@@ -1367,7 +1367,7 @@ msgstr ""
 msgid "Planing"
 msgstr ""
 
-#: project/templates/layout.html:187 project/templates/layout.html:273
+#: project/templates/layout.html:187 project/templates/layout.html:274
 #: project/templates/oauth2_client/list.html:10
 #: project/templates/oauth2_client/read.html:10
 #: project/templates/oauth2_token/list.html:10 project/templates/profile.html:4
@@ -1469,17 +1469,22 @@ msgstr ""
 msgid "Settings"
 msgstr ""
 
-#: project/templates/layout.html:272 project/templates/manage/reviews.html:10
+#: project/templates/layout.html:272
+#: project/templates/manage/custom_widgets.html:13
+msgid "Custom widgets"
+msgstr ""
+
+#: project/templates/layout.html:273 project/templates/manage/reviews.html:10
 #: project/templates/manage/widgets.html:5
 #: project/templates/manage/widgets.html:9
 msgid "Widgets"
 msgstr ""
 
-#: project/templates/layout.html:283
+#: project/templates/layout.html:284
 msgid "Switch organization"
 msgstr ""
 
-#: project/templates/developer/read.html:4 project/templates/layout.html:333
+#: project/templates/developer/read.html:4 project/templates/layout.html:334
 #: project/templates/profile.html:29
 msgid "Developer"
 msgstr ""
@@ -1946,7 +1951,7 @@ msgstr ""
 msgid "Organization successfully updated"
 msgstr ""
 
-#: project/views/admin.py:68 project/views/manage.py:331
+#: project/views/admin.py:68 project/views/manage.py:346
 msgid "Settings successfully updated"
 msgstr ""
 
@@ -2004,27 +2009,27 @@ msgstr ""
 msgid "Invitation successfully deleted"
 msgstr ""
 
-#: project/views/event.py:179
+#: project/views/event.py:178
 msgid "Event successfully published"
 msgstr ""
 
-#: project/views/event.py:181
+#: project/views/event.py:180
 msgid "Draft successfully saved"
 msgstr ""
 
-#: project/views/event.py:224
+#: project/views/event.py:223
 msgid "Event successfully updated"
 msgstr ""
 
-#: project/views/event.py:250
+#: project/views/event.py:249
 msgid "Event successfully deleted"
 msgstr ""
 
-#: project/views/event.py:409
+#: project/views/event.py:408
 msgid "Referenced event changed"
 msgstr ""
 
-#: project/views/event.py:432
+#: project/views/event.py:431
 msgid "New event report"
 msgstr ""
 
@@ -2180,17 +2185,17 @@ msgid ""
 " the invitation was sent to."
 msgstr ""
 
-#: project/views/widget.py:150
+#: project/views/widget.py:151
 msgid "Thank you so much! The event is being verified."
 msgstr ""
 
-#: project/views/widget.py:154
+#: project/views/widget.py:155
 msgid ""
 "For more options and your own calendar of events, you can register for "
 "free."
 msgstr ""
 
-#: project/views/widget.py:212
+#: project/views/widget.py:221
 msgid "New event review"
 msgstr ""
 
diff --git a/project/views/manage.py b/project/views/manage.py
index de71e45..d648d59 100644
--- a/project/views/manage.py
+++ b/project/views/manage.py
@@ -291,6 +291,21 @@ def manage_admin_unit_event_lists(id, path=None):
     )
 
 
+@app.route("/manage/admin_unit/<int:id>/custom-widgets")
+@app.route("/manage/admin_unit/<int:id>/custom-widgets/<path:path>")
+@auth_required()
+def manage_admin_unit_custom_widgets(id, path=None):
+    admin_unit = get_admin_unit_for_manage_or_404(id)
+    set_current_admin_unit(admin_unit)
+    full_height = path is not None and (path == "create" or path.endswith("/update"))
+
+    return render_template(
+        "manage/custom_widgets.html",
+        admin_unit=admin_unit,
+        full_height=full_height,
+    )
+
+
 @app.route("/manage/admin_unit/<int:id>/widgets", methods=("GET", "POST"))
 @auth_required()
 def manage_admin_unit_widgets(id):
diff --git a/tests/api/test_custom_widget.py b/tests/api/test_custom_widget.py
new file mode 100644
index 0000000..207a5a8
--- /dev/null
+++ b/tests/api/test_custom_widget.py
@@ -0,0 +1,55 @@
+def test_read(client, seeder, utils):
+    _, admin_unit_id = seeder.setup_base()
+    custom_widget_id = seeder.insert_event_custom_widget(admin_unit_id)
+
+    url = utils.get_url("api_v1_custom_widget", id=custom_widget_id)
+    response = utils.get_json(url)
+    utils.assert_response_ok(response)
+    assert response.json["settings"]["color"] == "black"
+
+
+def test_put(client, seeder, utils, app):
+    _, admin_unit_id = seeder.setup_api_access()
+    custom_widget_id = seeder.insert_event_custom_widget(admin_unit_id)
+
+    url = utils.get_url("api_v1_custom_widget", id=custom_widget_id)
+    response = utils.put_json(url, {"widget_type": "search", "name": "Neuer Name"})
+    utils.assert_response_no_content(response)
+
+    with app.app_context():
+        from project.models import CustomWidget
+
+        custom_widget = CustomWidget.query.get(custom_widget_id)
+        assert custom_widget.name == "Neuer Name"
+        assert custom_widget.widget_type == "search"
+
+
+def test_patch(client, seeder, utils, app):
+    _, admin_unit_id = seeder.setup_api_access()
+    custom_widget_id = seeder.insert_event_custom_widget(admin_unit_id)
+
+    url = utils.get_url("api_v1_custom_widget", id=custom_widget_id)
+    response = utils.patch_json(url, {"name": "Neuer Name"})
+    utils.assert_response_no_content(response)
+
+    with app.app_context():
+        from project.models import CustomWidget
+
+        custom_widget = CustomWidget.query.get(custom_widget_id)
+        assert custom_widget.name == "Neuer Name"
+        assert custom_widget.widget_type == "search"
+
+
+def test_delete(client, seeder, utils, app):
+    _, admin_unit_id = seeder.setup_api_access()
+    custom_widget_id = seeder.insert_event_custom_widget(admin_unit_id)
+
+    url = utils.get_url("api_v1_custom_widget", id=custom_widget_id)
+    response = utils.delete(url)
+    utils.assert_response_no_content(response)
+
+    with app.app_context():
+        from project.models import CustomWidget
+
+        custom_widget = CustomWidget.query.get(custom_widget_id)
+        assert custom_widget is None
diff --git a/tests/api/test_event_date.py b/tests/api/test_event_date.py
index 993b958..771179a 100644
--- a/tests/api/test_event_date.py
+++ b/tests/api/test_event_date.py
@@ -81,6 +81,9 @@ def test_search(client, seeder, utils):
     url = utils.get_url("api_v1_event_date_search", organizer_id=organizer_id)
     response = utils.get_ok(url)
 
+    url = utils.get_url("api_v1_event_date_search", organization_id=admin_unit_id)
+    response = utils.get_ok(url)
+
     listed_event_id = seeder.create_event(admin_unit_id)
     event_list_id = seeder.create_event_list(admin_unit_id, listed_event_id)
     url = utils.get_url("api_v1_event_date_search", event_list_id=event_list_id)
diff --git a/tests/api/test_organization.py b/tests/api/test_organization.py
index 31110e1..30d3e31 100644
--- a/tests/api/test_organization.py
+++ b/tests/api/test_organization.py
@@ -544,3 +544,41 @@ def test_organization_invitation_list_post(client, app, seeder, utils, mocker):
         id=invitation_id,
     )
     utils.assert_send_mail_called(mail_mock, "invited@test.de", invitation_url)
+
+
+def test_custom_widgets(client, seeder, utils):
+    _, admin_unit_id = seeder.setup_base()
+    seeder.insert_event_custom_widget(admin_unit_id)
+
+    url = utils.get_url(
+        "api_v1_organization_custom_widget_list", id=admin_unit_id, name="mein"
+    )
+    utils.get_ok(url)
+
+
+def test_custom_widgets_post(client, seeder, utils, app):
+    user_id, admin_unit_id = seeder.setup_api_access()
+
+    url = utils.get_url("api_v1_organization_custom_widget_list", id=admin_unit_id)
+    response = utils.post_json(
+        url,
+        {
+            "widget_type": "search",
+            "name": "Neues Widget",
+            "settings": {"color": "black"},
+        },
+    )
+    utils.assert_response_created(response)
+    assert "id" in response.json
+
+    with app.app_context():
+        from project.models import CustomWidget
+
+        custom_widget = (
+            CustomWidget.query.filter(CustomWidget.admin_unit_id == admin_unit_id)
+            .filter(CustomWidget.name == "Neues Widget")
+            .first()
+        )
+        assert custom_widget is not None
+        assert custom_widget.widget_type == "search"
+        assert custom_widget.settings["color"] == "black"
diff --git a/tests/seeder.py b/tests/seeder.py
index 2cde408..822376d 100644
--- a/tests/seeder.py
+++ b/tests/seeder.py
@@ -200,6 +200,28 @@ class Seeder(object):
 
         return organizer_id
 
+    def insert_event_custom_widget(
+        self,
+        admin_unit_id,
+        widget_type="search",
+        name="Mein Widget",
+        settings={"color": "black"},
+    ):
+        from project.models import CustomWidget
+
+        with self._app.app_context():
+            custom_widget = CustomWidget()
+            custom_widget.admin_unit_id = admin_unit_id
+            custom_widget.widget_type = widget_type
+            custom_widget.name = name
+            custom_widget.settings = settings
+
+            self._db.session.add(custom_widget)
+            self._db.session.commit()
+            custom_widget_id = custom_widget.id
+
+        return custom_widget_id
+
     def insert_default_oauth2_client(self, user_id):
         from project.api import scope_list
         from project.models import OAuth2Client
diff --git a/tests/views/test_manage.py b/tests/views/test_manage.py
index c3e1b07..43a04b0 100644
--- a/tests/views/test_manage.py
+++ b/tests/views/test_manage.py
@@ -202,3 +202,10 @@ def test_admin_unit_event_lists(client, seeder, utils):
 
     url = utils.get_url("manage_admin_unit_event_lists", id=admin_unit_id)
     utils.get_ok(url)
+
+
+def test_admin_unit_custom_widgets(client, seeder, utils):
+    _, admin_unit_id = seeder.setup_base()
+
+    url = utils.get_url("manage_admin_unit_custom_widgets", id=admin_unit_id)
+    utils.get_ok(url)