---
title: Flexible Working Hours Request Form
product: PDF Generator
description: Get a printable flexible working hours request form in PDF. Create editable or prefilled employee schedule request forms with SurveyJS PDF Generator.
framework: Vue 3
source: https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/vue3js
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Flexible Working Hours Request Form (Vue 3)

## Files

### `public/index.html`

```html
<div style="display: flex;">
    <div id="app" style="flex: 1 1 0%; height: 100%; min-width: 0;"></div>
    <div id="pdf-preview" style="flex: 0.7 0.7 0%; display: none">
        <embed id="pdf-preview-frame" type="application/pdf" style="width:100%; height:100%;" />
    </div>
</div>
```

### `src/App.vue`

```html
<template>
    <SurveyComponent :model="survey" />
</template>
<script setup lang="ts">
    import { Model } from "survey-core";
    import { SurveyComponent } from "survey-vue3-ui";
    import "survey-core/survey-core.min.css";
    import { SurveyPDF } from "survey-pdf";
    import "./index.css";
    import { json } from "./json";

    function createSurveyPdfModel (surveyModel) {
        const surveyPDF = new SurveyPDF(json);
        if (surveyModel) {
            surveyPDF.data = surveyModel.data;
            surveyPDF.locale = surveyModel.locale;
            
            
        }
        
        return surveyPDF;
    }
    function saveSurveyToPdf (filename, surveyModel) {
        const pdfDoc = createSurveyPdfModel(surveyModel);
        if (!pdfDoc) return;
    
        pdfDoc.save(filename);
    }
    
    const previewDiv = document.getElementById("pdf-preview");
    const previewEmbed = document.getElementById("pdf-preview-frame");
    let pdfBlobUrl;
    
    function showPdfPreview(surveyModel) {
        if (!previewDiv || !previewEmbed) return;
    
        const pdfDoc = createSurveyPdfModel(surveyModel);
        if (!pdfDoc) return;
    
        pdfDoc.raw("blob").then((blob) => {
            if (pdfBlobUrl) {
                URL.revokeObjectURL(pdfBlobUrl);
            }
            pdfBlobUrl = URL.createObjectURL(blob);
            previewEmbed.setAttribute("src", pdfBlobUrl);
            previewDiv.style.display = "block";
        });
    }
    
    function previewPdf(surveyModel) {
        if (!previewDiv) return;
    
        if (previewDiv.style.display !== "none") {
            previewDiv.style.display = "none";
            return;
        }
    
        showPdfPreview(surveyModel);
    }
    
    const survey = new Model(json);
    survey.showCompleteButton = false;
    survey.navigationButtonsLocation = "topBottom";
    survey.addNavigationItem({
        id: "survey_save_as_file",
        title: "Download PDF",
        action: () => {
            saveSurveyToPdf("surveyResult.pdf", survey);
        }
    });
    survey.addNavigationItem({
        id: "survey_pdf_preview",
        title: "Preview PDF",
        visible: window.navigator.pdfViewerEnabled,
        action: () => {
            previewPdf(survey);
        }
    });
</script>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/json.ts`

```ts
export const json = {
  "title": "Flexible Working Hours Request Form",
  "headerView": "advanced",
  "questionsOnPageMode": "singlePage",
  "pages": [
    {
      "name": "page-one",
      "title": "Employee Information",
      "elements": [
        {
          "type": "text",
          "name": "name",
          "title": "Employee Name"
        },
        {
          "type": "text",
          "name": "title",
          "title": "Job Title"
        },
        {
          "type": "text",
          "name": "department",
          "title": "Department / Division / Centre",
          "startWithNewLine": false
        },
        {
          "type": "boolean",
          "name": "number-of-weeks",
          "title": "I have worked continuously for the last 26 weeks.",
          "isRequired": true,
          "displayMode": "checkbox"
        },
        {
          "type": "boolean",
          "name": "previous-requests",
          "title": "I confirm that I have not submitted a flexible working request within the last 12 months.",
          "isRequired": true,
          "displayMode": "checkbox"
        },
        {
          "type": "radiogroup",
          "name": "current-pattern",
          "title": "Current Working Pattern",
          "description": "Select the option that best describes your current working schedule.",
          "colCount": 2,
          "choices": [
            {
              "value": "9-5",
              "text": "Monday to Friday, 9 AM to 5 PM"
            },
            {
              "value": "8-4",
              "text": "Monday to Friday, 8 AM to 4 PM"
            },
            {
              "value": "10-6",
              "text": "Monday to Thursday, 10 AM to 6 PM"
            },
            {
              "value": "7-3",
              "text": "Tuesday to Saturday, 7 AM to 3 PM"
            },
            {
              "value": "12-8",
              "text": "Wednesday to Sunday, 12 PM to 8 PM"
            },
            {
              "value": "weekends",
              "text": "Weekends only, 9 AM to 5 PM"
            },
            {
              "value": "even",
              "text": "Monday, Wednesday, Friday, 9 AM to 5 PM"
            },
            {
              "value": "part-time",
              "text": "Part-time: Monday, Wednesday, Friday, 10 AM to 2 PM"
            }
          ]
        },
        {
          "type": "radiogroup",
          "name": "pattern",
          "title": "Requested Working Pattern",
          "description": "Select the working pattern you would like to request.",
          "colCount": 2,
          "choices": [
            {
              "value": "part-time",
              "text": "Part-time: Monday, Wednesday, Friday, 10 AM to 2 PM"
            },
            {
              "value": "shifting",
              "text": "Shift work: Rotating shifts (7 AM - 3 PM / 3 PM - 11 PM / 11 PM - 7 AM)"
            },
            {
              "value": "flexible",
              "text": "Flexible hours with core hours from 10 AM to 3 PM"
            },
            {
              "value": "compressed",
              "text": "Compressed workweek: Monday to Thursday, 8 AM to 6 PM"
            },
            {
              "value": "remote",
              "text": "Remote work arrangement with flexible hours (typically 9 AM to 5 PM)"
            }
          ]
        },
        {
          "type": "text",
          "name": "start-date",
          "title": "Requested Start Date for the New Working Pattern",
          "description": "The start date must be at least 7 days from today.",
          "validators": [
            {
              "type": "expression",
              "text": "The start date must be at least 7 days from today.",
              "expression": "diffDays({start-date}, today()) > 7 and {start-date} > today()"
            }
          ],
          "inputType": "date"
        },
        {
          "type": "boolean",
          "name": "risk-assessment",
          "title": "If requesting remote work, have you completed a Homeworking Risk Assessment?",
          "description": "Indicate whether a Homeworking Risk Assessment has been completed, if applicable."
        },
        {
          "type": "comment",
          "name": "areas",
          "title": "Impact of the Requested Arrangement",
          "description": "Describe the expected impact of your requested arrangement on the service, your colleagues, and your manager. If there may be challenges, explain how they could be managed. If your request cannot be implemented exactly as proposed, indicate whether you have any flexibility in your preferred arrangement.",
          "autoGrow": true
        },
        {
          "type": "boolean",
          "name": "consent",
          "title": "I understand that if this request is approved, it will result in a permanent change to my employment Terms and Conditions.",
          "isRequired": true,
          "requiredErrorText": "You must confirm your understanding before submitting this request.",
          "displayMode": "checkbox"
        },
        {
          "type": "signaturepad",
          "name": "signature",
          "title": "Employee Signature",
          "signatureHeight": 100
        },
        {
          "type": "text",
          "name": "date",
          "startWithNewLine": false,
          "title": "Date",
          "inputType": "date"
        },
        {
          "type": "html",
          "name": "comment-for-line-manager",
          "html": "<em>For line managers: After receiving this form, please contact your HR Partner to proceed with the application or obtain further guidance.</em>"
        }
      ]
    }
  ]
};
```

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `src/theme.ts`

```ts
export const themeJson = {};
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-pdf": "latest",
    "survey-vue3-ui": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/reactjs.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/pdf-generator/examples/pdf-hr-flexible-working-hours-request-form-template/vanillajs.md)