I moonlight (a lot of us do). I moonlight as a Lego Engineer. It's always been a dream of mine, and in the evenings, I've been making it a reality.

我月光（我们很多人都这样做）。 我是乐高工程师的月光。 这一直是我的梦想，到了晚上，我一直在实现它。

At first I would help throw a party now and then — a Lego Party, where I bring the Legos, supply decades of Lego construction expertise, and clean up the mess. When business picked up, I hired an assistant. We started to fill some other niches: one-on-one construction instruction for small, medium and large Lego sets, Lego therapy for stress and IBS relief (Irritable-Builder-Syndrome), adult Lego parties (things can get weird).

首先，我会时不时地举行一个派对-一个乐高派对，我带上乐高积木，提供数十年的乐高建筑专业知识，并清理烂摊子。 业务起步时，我雇了一个助手。 我们开始填补其他一些壁ni：针对小型，中型和大型Lego集的一对一构造说明，针对压力和IBS缓解的Lego治疗（易怒-建造者综合症），成人Lego派对（事情会变得很奇怪）。

Recently, I started offering a regular schedule of evening and weekend classes aimed at helping people become better builders. Managing a few appointments a week was fine, but the phone calls from the class attendees were starting to seriously jeopardize my day job. Tapping into that daytime experience as a software engineer, I decided it was the right time to move that regular schedule into the modern era with an online calendar for booking classes:

最近，我开始定期提供夜间和周末课程，以帮助人们成为更好的建筑商。 每周管理几次约会很好，但是班级参与者的电话开始严重危害我的日常工作。 凭借作为软件工程师的白天经验，我认为现在是时候通过在线预定课程的在线日历将常规时间表带入现代时代了：

Now, I don't want this class calendar to be my life's work, which means using a couple open-source libraries and an existing online booking platform. And I do want to do it right, which means a little up-front design. We'll build this in two pieces:

现在，我不希望这个课堂日历成为我一生的工作，这意味着要使用几个开源库和一个现有的在线预订平台。 我确实想做正确的事，这意味着要进行一些前期设计。 我们将分两部分进行构建：

1. A Server Component: an API facade, allowing control over which API calls are made to the booking platform. After all, we don't want our API credentials floating around in a client-side application.
   • Acuity Scheduling is the online platform I selected (full disclosure: this is my day job). Acuity has an appointment scheduling API, a backend for managing my availability and appointment reminders, and a front-end allowing clients to cancel and reschedule online.
   • Express.js is an HTTP server suitable for the task of serving the API facade.

   服务器组件：API外观，允许控制对预订平台进行的API调用。 毕竟，我们不希望我们的API凭证在客户端应用程序中浮动。

   • Acuity Scheduling是我选择的在线平台（完整披露：这是我的日常工作）。 Acuity具有约会计划API ，用于管理我的可用性和约会提醒的后端，以及允许客户在线取消和重新计划的前端。
   • Express.js是一个HTTP服务器，适合于服务API外观的任务。
2. A Client Component: a UI for mapping client intention to API calls, e.g., a calendar and some forms ;-)
   • Webpack is a module bundler at heart, and we'll use it to pack up our client-side assets. It's also a helpful development server!
   • FullCalendar is a full-featured calendar plugin for jQuery with good docs and a long history of development.

   客户端组件：用于将客户端意图映射到API调用的UI，例如日历和某些形式；-)

   • Webpack是模块捆绑器的核心，我们将使用它来打包客户端资产。 它也是有用的开发服务器！
   • FullCalendar是一款功能齐全的jQuery日历插件，具有出色的文档和悠久的开发历史。

Let's get started!

让我们开始吧！

＃关于敏锐度调度的部分 ( #The Part About Acuity Scheduling )

For many businesses, online scheduling means more time to do what they love and less time managing their calendar. For clients, it means scheduling an appointment on their terms, say, late in the evening, with a glass of red wine, from a bathtub.

对于许多企业而言，在线计划意味着更多的时间去做自己喜欢的事情，而更少的时间来管理日历。 对于客户而言，这意味着按他们的条件安排约会，例如，到深夜，从浴缸里喝一杯红酒。

For me, it means I can stop taking calls for my side job at work.

对我来说，这意味着我可以停止接电话上班。

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

Acuity Scheduling has a developer friendly scheduling platform for customizing my booking process, and all the bells and whistles one expects from a modern online appointment scheduler.

Acuity Scheduling具有一个开发人员友好的调度平台 ，可用于自定义我的预订流程，并且人们希望现代的在线约会调度器能为您提供所有的 便利 。

To follow along with this HowTo, a free trial will work just fine. You'll need to create a couple Group Classes to display on the calendar, and you'll need your User ID and API Key from Business Settings - Integrations.

要遵循此方法， 免费试用就可以了。 您需要创建几个要在日历上显示的组类 ，并且需要“ 业务设置-集成”中的用户ID和API密钥 。

＃服务器组件 ( #The Server Component )

The server component talks to the Acuity Scheduling API on our behalf, and serves up the page containing the class calendar. To get started, we'll need to install a couple Node modules:

服务器组件代表我们与Acuity Scheduling API进行对话，并提供包含类日历的页面。 首先，我们需要安装几个Node模块：

• acuityscheduling Acuity's JS SDK 安排Acuity的JS SDK
• express A JavaScript HTTP Server 表达一个JavaScript HTTP服务器

First create a new project, then install the these modules using npm:

首先创建一个新项目，然后使用npm安装以下模块：

$npm init
$ npm install --save acuityscheduling express

Now that we have the modules installed, we can start building the server. Create a new file called app.js and include the modules:

现在我们已经安装了模块，我们可以开始构建服务器了。 创建一个名为app.js的新文件，并包含以下模块：

'use strict';// Modules:
var AcuityScheduling = require('acuityscheduling');
var express = require('express');

Then create a new instance of the Acuity SDK for accessing the API. We'll use environmental variables to set the Acuity API credentials and other configuration values because it's a quick and easy alternative to config files:

```javascript // Create an instance of Acuity for accessing the API: var acuity = AcuityScheduling.basic({ "userId": process.env.ACUITY_USER_ID, "apiKey": process.env.ACUITY_API_KEY }); ```

然后创建Acuity SDK的新实例以访问API。 我们将使用环境变量来设置Acuity API凭据和其他配置值，因为它是配置文件的一种快速简便的替代方法：

;``javascript //创建一个用于访问API的Acuity实例：var acuity = AcuityScheduling.basic（{“ userId”：process.env.ACUITY_USER_ID，“ apiKey”：process.env.ACUITY_API_KEY}）; ```

Next, we need to create an instance of the Express server and choose a port to listen on. We'll give the port a default value of 3000, but also let it be configured from the environmental variables:

```javascript // Create a new express server: var app = express(); var port = process.env.ACUITY_PORT || 3000; ```

接下来，我们需要创建Express服务器的实例并选择要侦听的端口。 我们将为端口提供默认值3000，但也可以通过环境变量对其进行配置：

javascript //创建一个新的快递服务器：var app = express（）; var port = process.env.ACUITY_PORT || 3000; ```

Now that we have an app server, we'll add a couple routes to do our real work for us. We'll need one route to serve our client component (for now, let's just say "Hi") and another to get the list of classes from the Acuity API. To display a monthly calendar of classes, we'll use a query string parameter month to tell Acuity which month we want:

```javascript // Add some routes: app.get('/', function (req, res) { res.send('Hello World'); }); app.get('/api/classes', function (req, res) { // Request classes from the Acuity API: acuity.request('/availability/classes?month=' + req.query.month, function (err, response) { if (err) { return console.error(err); } res.send(response.body); }); }); ```

现在我们有了一个应用服务器，我们将添加一些路由来为我们完成实际工作。 我们将需要一种途径来服务我们的客户端组件（现在，我们只说“ Hi”），而另一条途径来从Acuity API获取类列表。 要显示每月的班级日历，我们将使用查询字符串参数month来告诉Acuity我们想要哪个月份：

```javascript //添加一些路由：app.get（'/'，function（req，res）{res.send（'Hello World'）;}）; app.get（'/ api / classes'，function（req，res）{//从Acuity API请求类：acuity.request（'/ availability / classes？month ='+ req.query.month，function（err ，response）{if（err）{return console.error（err）;} res.send（response.body）;}）;}）; ```

Now we can start the server:

```javascript // Listen on the selected port: app.listen(port, function (err) { if (err) { return console.error(err); } console.log('Server started! Say hey at http://localhost:' + port + '/') }); ```

现在我们可以启动服务器了：

```javascript //在选定的端口上侦听：app.listen（端口，函数（err）{如果（err）{return console.error（err）;} console.log（'服务器已启动！请在http： // localhost：'+ port +'/'）}）; ```

Finally, let's take it all for a spin. Start the server, passing your Acuity user ID and API key from Business Settings - Integrations in through the environmental variables:

```bash $ ACUITY_USER_ID = 123 ACUITY_API_KEY=abc node app.js ```

最后，让我们一起旋转一下。 启动服务器，并通过环境变量从“业务设置-集成”中传递您的Acuity用户ID和API密钥 ：

bash $ ACUITY_USER_ID = 123 ACUITY_API_KEY = abc节点app.js

If all goes well, you'll see the "Server started!" message. Head to http://localhost:3000/to say Hi to your server. Pull up a class list by visiting http://localhost:3000/api/classes?month=2017-02.

如果一切顺利，您将看到“服务器已启动！” 信息。 前往 http：// localhost：3000 /向您的服务器打个招呼。 通过访问来拉出班级列表 http：// localhost：3000 / api / classes？month = 2017-02 。

＃关于客户端组件的部分 ( #The Part About the Client Component )

The client component is our web-based user interface, allowing folks to browse the class calendar and book an appointment. It talks to the server component, which makes calls to the Acuity API and returns a list of classes. We're gonna need a couple more modules:

客户端组件是我们基于Web的用户界面，允许人们浏览课堂日历并预约约会。 它与服务器组件进行对话，后者对Acuity API进行调用并返回类列表。 我们将需要几个模块：

• webpack, a bundler for client-side assets webpack ，客户端资产捆绑器
• FullCalendar, a calendar widget 日历小部件FullCalendar
• style-loader and css-loader, two webpack plugins we'll be using. style-loader和css-loader，这是我们将要使用的两个webpack插件。

These can also be installed using npm:

```bash $ npm install --save-dev webpack style-loader css-loader fullcalendar ```

这些也可以使用npm安装：

bash $ npm install --save-dev webpack样式加载器css-loader fullcalendar

WEBPACK配置 ( WEBPACK CONFIGURATION )

Webpack is an awesomely powerful JavaScript module bundler and CSS bundler, image bundler, extensible bundler, development server — everything but the kitchen sink (and you can probably make a plugin to bundle that too).

Webpack是一个功能强大JavaScript模块捆绑器，CSS捆绑器，图像捆绑器，可扩展捆绑器，开发服务器-除厨房水槽之外的所有东西（您也可以制作一个插件来捆绑它）。

Along with this power comes a right mess of configuration options, but we'll keep it simple. Create a new file webpack.config.js and fill it with this:

```javascript module.exports = { // Configure main client bundle: entry: './src/index', output: { path: './public', filename: 'bundle.js' }, // Configure CSS module loader: module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] } }; ```

随之而来的是正确的配置选项 ，但是我们将使其保持简单。 创建一个新文件webpack.config.js，并填充以下内容：

```javascript module.exports = {//配置主客户端程序包：条目：'./src/index'，输出：{路径：'./public'，文件名：'bundle.js'}，//配置CSS模块加载器：模块：{加载器：[{测试：/\.css$/，加载器：“ style-loader！css-loader”}]}}; ```

Create an empty file src/index.js, you can now run webpack:

```bash $ ./node_modules/.bin/webpack ```

创建一个空文件src / index.js，您现在可以运行webpack：

bash $ ./node_modules/.bin/webpack```

At this point, we're just creating a big bundle of nothing, but if you've done everything correctly you'll see some output about chunks. More importantly, you should now have a file public/bundle.js. If everything isn't quite right, you'll see a (hopefully) much more helpful error message.

在这一点上，我们只是创建了一大堆什么都没有的东西，但是如果您正确地完成了所有操作，将会看到一些有关块的输出。 更重要的是，您现在应该有一个文件public / bundle.js。 如果一切都不尽如意，您将（希望）看到一条更有用的错误消息。

Run ./node_modules/.bin/webpack to rebuild the client component's bundle as we go along, or start webpack in watch mode to continually rebuild the bundle as files change:./node_modules/.bin/webpack --watch

在运行时运行./node_modules/.bin/webpack来重建客户端组件的捆绑包，或者在监视模式下启动webpack以在文件更改时不断地重建捆绑包：./ node_modules / .bin / webpack --watch

维护客户组件 ( SERVING UP THE CLIENT COMPONENT )

Now that we have our asset bundle, create an HTML file to serve it in public/index.html:

```html Class Calendar

现在我们有了资产捆绑包，创建一个HTML文件以在public / index.html中提供它：

html班级日历

班级日历 (Class Calendar)

``` ```

We'll wire this up in our existing app.js using the built-in Express middleware for serving static assets. Simply replace the app.get('/', ... route with app.use('/', express.static('public'));. The full list of routes should now be:

```javascript // Add some routes: app.use('/', express.static('public')); app.get('/api/classes', function (req, res) { acuity.request('/availability/classes?month=' + req.query.month, function (err, response) { if (err) { return console.error(err); } res.send(response.body); }); }); ```

我们将使用内置的Express中间件将其连接到我们现有的app.js中，以提供静态资产。 只需将app.get（'/'，... route替换为app.use（'/'，express.static（'public'））;.现在，路由的完整列表应为：

javascript //添加一些路由：app.use（'/'，express.static（'public'））; app.get（'/ api / classes'，函数（req，res）{acuity.request（'/ availability / classes？month ='+ req.query.month，函数（err，response）{if（err）{ return console.error（err）;} res.send（response.body）;}）;}）; ```

Restart your server and blam: http://localhost:3000/ You've got a skeleton for the client-side UI. You can find the full source code for this step on GitHub.

重新启动服务器并blam： http：// localhost：3000 /您已经为客户端UI有了框架。 您可以在GitHub上找到此步骤的完整源代码 。

全日历 ( FULLCALENDAR )

Now that we have the skeleton for our UI, we can start putting together the calendar. First, open the empty file src/index.js and include the dependencies:

```javascript 'use strict'; // Modules: var $ = require('jquery'); var FullCalendar = require('fullcalendar'); ```

现在我们有了UI的框架，我们可以开始整理日历了。 首先，打开空文件src / index.js并包含依赖项：

``javascript'使用严格'; //模块：var $ = require（'jquery'）; var FullCalendar = require（'fullcalendar'）; ```

FullCalendar is a jQuery module, and we'll need jQuery to kick things off. Next, we'll add our styles. Remember style-loader and css-loader and the modules config inwebpack.config.js? Using those loaders, we can require CSS stylesheets, and webpack will automatically bundle them into bundle.js and load them at runtime:

```javascript // Load styles: require('fullcalendar/dist/fullcalendar.css'); ```

FullCalendar是一个jQuery模块，我们需要jQuery才能开始。 接下来，我们将添加样式。 还记得stylepacker和css-loader以及inwebpack.config.js中的模块config吗？ 使用这些加载器，我们可能需要CSS样式表，并且webpack会自动将它们捆绑到bundle.js中并在运行时加载它们：

javascript //加载样式：require（'fullcalendar / dist / fullcalendar.css'）; ```

With the styles in place, we're ready to render the calendar. We'll pass in some initial configuration defining the calendar's header, and some empty callbacks to fetch events and handle clicks.

```javascript // Render the calendar on document load. $(function () { $('#class-calendar').fullCalendar({ // Display the month name and previous/next month buttons: header: { left: 'prev', center: 'title', right: 'next' }, // Fetch events from the API and format them for FullCalendar events: function (start, end, timezone, callback) { }, // Open the client scheduler on click: eventClick: function (event) { } }); }); ```

设置好样式后，我们就可以渲染日历了。 我们将传入一些定义日历标题的初始配置，以及一些用于获取事件和处理点击的空回调。

```javascript //在文档加载时渲染日历。 $（function（）{$（'＃class-calendar'）。fullCalendar（{//显示月份名称和上一个/下个月的按钮：标头：{左：“上一个”，居中：“标题”，右：“ next'}，// //从API中获取事件，并为FullCalendar事件设置事件格式：function（start，end，timezone，callback）{}，//单击打开客户端调度程序：eventClick：function（event）{}}） ;}）; ```

Re-bundle your app using ./node_modules/.bin/webpack and refresh the page http://localhost:3000/. You'll now see a very empty calendar — let's fill it up!

使用./node_modules/.bin/webpack重新捆绑您的应用程序，并刷新页面http：// localhost：3000 / 。 现在您将看到一个非常空的日历-让我们填满它吧！

显示班级日历 ( DISPLAY THE CLASS CALENDAR )

Now, we're ready to display our class calendar and make it interactive. FullCalendar's handy events option allows you to asynchronously fetch events to display on the calendar. We'll make a request to our API facade /api/classes, format the response for FullCalendar, and supply the data to the FullCalendar callback:

```javascript events: function (start, end, timezone, callback) { // Get the month currently in view: var month = start.endOf('week').format('YYYY-MM-DD'); // Formats class data from the API for a FullCalendar event: function createCalendarEventFromClassData (classData) { return { title: classData.name+' ('+(classData.slots - classData.slotsAvailable)+'/'+classData.slots+')', start: classData.time, color: classData.color, data: classData // for the "click" handler }; } // And request the classes for that month: $.get('/api/classes?month='+month) .then(function (classes) { // Map the classes data to events for calendars: var eventsData = []; for (var i = 0; i < classes.length; i++) { eventsData.push( createCalendarEventFromClassData(classes[i]) ); }; // Send the events data to the calendar: callback(eventsData); }, function (error) { console.error(error); }); }, ```

现在，我们准备显示班级日历并使其具有交互性。 FullCalendar的方便事件选项使您可以异步获取要显示在日历上的事件。 我们将向API外观/ api / classes发出请求，格式化FullCalendar的响应，并将数据提供给FullCalendar回调：

``javascript events：function（start，end，timezone，callback）{//获取当前在视图中的月份：var month = start.endOf（'week'）。format（'YYYY-MM-DD'）; //通过API格式化FullCalendar事件的类数据：function createCalendarEventFromClassData（classData）{return {title：classData.name +'（'+（classData.slots-classData.slotsAvailable）+'/'++ classData.slots +'）' ，开始：classData.time，颜色：classData.color，数据：classData //用于“点击”处理程序}； } //并请求该月的类：$ .get（'/ api / classes？month ='+ month）.then（function（classes）{//将类数据映射到日历的事件：var eventsData = [ ]; for（var i = 0; i <classes.length; i ++）{eventsData.push（createCalendarEventFromClassData（classes [i]））;}; //将事件数据发送到日历：callback（eventsData）;}，函数（错误）{console.error（错误）;}）; }，```

Finally, we can wire up the click handler. We'll use your Acuity user ID and the "data" attribute we supplied to the FullCalendar event to build a direct scheduling link. To get the Acuity user ID on the client side, we'll use a special webpack plugin to define a constant ACUITY_USER_ID. From now on, run webpack with the option --define ACUITY_USER_ID=123.

最后，我们可以连接点击处理程序。 我们将使用您的Acuity用户ID和我们提供给FullCalendar事件的“数据”属性来构建直接的计划链接 。 为了在客户端获取Acuity用户ID，我们将使用特殊的Webpack插件来定义常量ACUITY_USER_ID。 从现在开始，使用选项--define ACUITY_USER_ID = 123运行webpack。

Lego enthusiasts will use that link to book their class:

```javascript // Open the client scheduler on click: eventClick: function (event) { var data = event.data; if (typeof ACUITY_USER_ID === 'undefined') { console.error('Acuity user ID missing. Please start webpack with `--define ACUITY_USER_ID=YOUR_ID`'); } window.open('https://app.acuityscheduling.com/schedule.php?' + 'owner=' + ACUITY_USER_ID + '&datetime='+data.time + '&calendarID='+data.calendarID + '&appointmentType='+data.appointmentTypeID ); } ```

乐高爱好者将使用该链接预订课程：

javascript //点击以下命令打开客户端调度程序：eventClick：function（event）{var data = event.data; if（typeof ACUITY_USER_ID ==='undefined'）{console.error（'Acuity用户ID缺失。请使用`--define ACUITY_USER_ID = YOUR_ID'启动webpack）； } window.open（'https://app.acuityscheduling.com/schedule.php？'+'owner ='+ ACUITY_USER_ID +'＆datetime ='+ data.time +'＆calendarID ='+ data.calendarID +'＆appointmentType = '+ data.appointmentTypeID）; }```

With that final change, it's time to re-bundle with ./node_modules/.bin/webpack --define ACUITY_USER_ID=123. You can find the full changes on GitHub. After rebundling, head back to localhost:3000 and schedule some classes:

经过最后的更改，是时候重新绑定./node_modules/.bin/webpack --define ACUITY_USER_ID = 123。 您可以在GitHub上找到完整的更改 。 重新打包后，回到localhost：3000并安排一些课程：

＃附录-从这里去哪里 ( #Appendix - Where to Go From Here )

The bones of our class calendar are there, but there's plenty more to do! Here are some ideas —

我们班级日历的骨架在那儿，但是还有很多事情要做！ 这里有一些想法-

• Schedule in style using Bootstrap or a custom stylesheet. Just install bootstrap with npm install --save-dev bootstrap and addrequire('bootstrap/dist/css/bootstrap.css) to your src/index.js. 使用Bootstrap或自定义样式表安排样式。 只需使用npm install --save-dev bootstrap来安装bootstrap并将addrequire（'bootstrap / dist / css / bootstrap.css）添加到src / index.js。
• Enable CORS for the API facade using the Express CORS middleware. This will enable you to deploy the static assets in /public to your existing website, while hosting the API facade somewhere else. 使用Express CORS中间件为API门面启用CORS。 这将使您能够将/ public中的静态资产部署到现有网站，同时在其他地方托管API外观。
• Build a custom appointment booking UI using Acuity's Appointment APIs. 使用Acuity的约会API构建自定义的约会约会UI。

This content is sponsored via Syndicate Ads.

此内容是通过Syndicate Ads赞助的。

翻译自: https://scotch.io/tutorials/build-an-online-class-calendar-with-acuity-schedulings-api