显示带有免费WordPress日历插件的事件日历

许多企业需要与客户共享事件日历。 例如，餐厅可以使用事件日历来宣传特殊的音乐事件或假日菜单。 同样，学校可以使用其网站上的事件日历，让学生和老师知道学校中与体育，考试或其他事件有关的任何即将发生的活动。

在本教程中，您将学习如何使用免费的My Calendar WordPress事件管理插件来创建事件。 该插件具有许多惊人的功能，我们将在本教程中使用。

我们将要建设的

我们在本教程中的重点将放在创建日历上，该日历使公司可以标记他们管理的所有事件，如聚会，婚礼，艺术品展览等。他们将能够看到所有将来和过去的事件。

我们将事件标记为彩色，以便于识别。 用户将能够单击任何特定的事件类别，并且只能在日历中看到匹配的事件。 单击任何事件将显示一个弹出窗口，其中包含有关该事件的所有基本信息，如时间和位置。

我们将从安装插件开始。 然后，我们将更改一些设置以修改输入和输出。 之后，我们将创建一些事件类别，添加一些事件位置，最后将事件添加到我们的日历中。

另外，您很有可能希望对事件日历的外观进行一些更改，以使其与网站的其余部分融合在一起。 因此，我们将在最后一步中添加一些自己CSS规则，以对日历进行一些外观上的更改。

创建事件日历

设置事情

创建事件日历的第一步是安装“ 我的日历”插件。 安装并激活插件后，进入管理控制台中的我的日历>设置 。 您会在那里看到一堆标签。

单击“ 常规” ，然后指定要显示事件日历的页面的ID。 在我们的例子中是118。此步骤是可选的，当您发布第一个事件时，插件将自动为您创建事件日历页面。 但是，最好知道如何在特定页面上显示事件日历。

每当使用此插件创建新事件时，您都必须填写有关该事件的一些详细信息。 其中可能包括事件位置，简短说明等许多内容。默认情况下，并非所有这些输入字段都被激活。 因此，您现在应该进入“ 输入”选项卡并检查要显示的字段，如下图所示。

您可能已经注意到，事件日历页面上除了日历本身之外还有很多按钮和下拉菜单。 这些按钮的显示顺序由“ 输出”选项卡中的设置控制。 您可以上下拖动元素以按特定顺序显示它们。 只需将元素拖动到“ 隐藏”行下方即可防止其显示。

用户单击事件后，可以通过在“ 单个事件详细信息”下切换某些复选框来控制在弹出窗口中向用户显示哪些信息。

创建事件类别

现在我们已经完成了所有设置，现在该为事件日历创建实际内容了。

我们将首先添加一些类别以标记不同的事件。 该插件为用户提供了仅查看特定类别事件的选项。 将事件分配到不同类别后，可以通过这种方式进行过滤。

要将新类别添加到日历，只需转到我的日历>管理类别 ，然后为该类别指定名称和标签颜色。 您还可以通过从“ 类别图标”下拉列表中选择一个图标来选择在类别之前显示图标。

添加类别的所有详细信息后，请单击“ 添加类别”按钮以将类别添加到事件日历。

添加活动地点

您组织的任何事件都会在某个地方进行。 在指定不同事件的位置时，该插件做得很好。

您可以转到“ 我的日历”>“添加新位置”，向日历插件添加新位置 。 下一页将包含许多输入字段，要求输入位置的不同详细信息。 这包括普通的东西，例如街道地址，城市，邮政编码，国家/地区等。您不必填写所有这些值。 其中一些细节可以跳过。

确保您在顶部输入了位置名称。 创建事件时，这将帮助您在下拉菜单中轻松识别这些位置。

在此示例中，我们将添加在美国肯塔基州举行的艺术展的位置。 该地址是虚构的，但可以使您了解自己填写的详细信息。

该插件将为用户提供具有您指定地址的Google Maps链接。 这使人们更容易确定事件发生的确切位置。 单击“ 我的日历”>“管理位置”，可以编辑添加到插件的任何位置。

添加活动

现在，我们可以开始将事件添加到事件日历中了。 要添加活动，只需进入我的日历>添加新活动 。

现在，填写事件的标题和描述。 标题显示在事件日历的日期内。 当用户单击弹出窗口中的“ 阅读更多”链接时，该描述将显示在事件描述页面上。 从下拉菜单中将事件类别设置为展览 。

现在，您可以指定事件的日期和时间。 您添加到日历中的至少一些事件很有可能是重复发生的事件。 在这种情况下，将所有重复的事件一个接一个地添加到日历中将非常耗时。

为了让您更轻松，“我的日历”插件为您提供了为事件指定重复模式的选项。 这意味着您可以指定事件重复的次数和重复的频率。

在本教程开始时，我们选中了该框以启用事件的简短描述输入字段。 这使我们能够提供事件的简短摘要，每当用户单击日历中的事件时，该摘要就会显示在弹出窗口中。

您可以在“ 添加新事件”页面的底部指定事件的位置。 只需为该示例选择Art Exhibit（肯塔基州） 。 之后，单击页面顶部或底部的“ 发布”按钮。

更改事件日历的样式

完成本教程中的所有步骤后，您的事件日历将如下图所示。 如果其样式与下图不同，只需转到“ 我的日历”>“样式编辑器” ，然后从侧边栏中的下拉菜单中选择二十十八.css文件作为日历的主要样式表。

您还可以将其他主题应用于日历。 只需选择最喜欢的一个即可。 其中的某些样式（例如Inherit.css ）旨在提供尽可能少的样式，以便将主题中的大多数样式规则自动应用于日历。

样式编辑器页面显示了所选文件中应用于日历的所有CSS规则。 您可以在此处进行各种更改，这些更改将反映在事件日历页面上。

现在，我们只需要调整应用于不同元素（如表格标题，标题和类别图例底部）的间距和字体。 我们还将添加一些自己的样式规则，以根据自己的喜好调整日历的外观。

这是我们添加到事件日历中的所有规则。 只需将它们放在样式编辑器的底部，然后单击底部的“ 保存更改”按钮，更改将反映在事件日历页面上。

.mc-main .my-calendar-header .no-icon,
.mc-main .mc_bottomnav .no-icon {
    display: inline-block;
	/* width: 12px; */
	width: 15px;
	height: 15px;
	vertical-align: middle;
	margin-right: .25em;
	border-radius: 12px;
	position: relative;
	top: -2px;
	border: 1px solid #fff;
}

.mc-main .my-calendar-header span, .mc-main .my-calendar-header a,
.mc-main .mc_bottomnav span, .mc-main .mc_bottomnav a,
.mc-main .my-calendar-header select, .mc-main .my-calendar-header input {
	color: #313233;
	color: var(--primary-dark);
	/* border: 1px solid #efefef;
	border: 1px solid var(--highlight-light); */
	border-radius: 5px;
	padding: 4px 6px;
	font-size: 14px;
	/* font-family: Arial; */
	background: #fff;
	background: var(--secondary-light);
}

.mc-main .my-calendar-header input:hover, .mc-main .my-calendar-header input:focus,
.mc-main .my-calendar-header a:hover, .mc-main .mc_bottomnav a:hover,
.mc-main .my-calendar-header a:focus, .mc-main .mc_bottomnav a:focus {
	background: black;
}

div.mc-print {
    margin-top: 2rem;
}

.mc_bottomnav.my-calendar-footer {
    margin-top: 5rem;
}

.mc-main button.close {
	top: 5px;
	left: 5px;
}

.mc-main .calendar-event .details, .mc-main .calendar-events {
	border: 5px solid #ececec;
	box-shadow: 0 0 20px #999;
}


.mc-main .mc-time .day {
	border-radius: 0;
}

.mc-main .mc-time .month {
	border-radius: 0;
	border-right: 1px solid #bbb;
}

.mc-main .my-calendar-header span, .mc-main .my-calendar-header a,
.mc-main .mc_bottomnav span, .mc-main .mc_bottomnav a,
.mc-main .my-calendar-header select, .mc-main .my-calendar-header input {
	color: #313233;
	color: var(--primary-dark);
	border-radius: 0px;
	padding: 4px 10px;
	font-size: 14px;
	background: #fff;
	background: var(--secondary-light);
	border-bottom: 1px solid black;
}

.mc-main th abbr, .mc-main .event-time abbr {
    border-bottom: none;
    text-decoration: none;
    font-family: 'Passion One';
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1;
}

.mc-main caption, .mc-main.list .my-calendar-month, .mc-main .heading {
    font-size: 2.5rem;
    color: #666;
    color: var(--highlight-dark);
    text-align: right;
    margin: 0;
    font-family: 'Passion One';
    text-transform: uppercase;
}

.mc-main .category-key li.current a {
    border: 1px solid #969696;
    background: #dadada;
}

现在，转到事件日历页面，然后单击添加的事件之一。 这应该会打开一个漂亮的弹出窗口，显示事件的所有基本细节，例如时间，位置和简短说明。

最后的想法

在本教程中，我们学习了如何使用“我的日历”插件来为我们的网站创建基本的事件日历。 该插件非常容易创建和添加事件以及简单的描述。

翻译自: https://code.tutsplus.com/tutorials/event-management-with-a-free-wordpress-calendar-plugin--cms-34054